Código de implementación de ICHART.JS para dibujar líneas punteadas y efectos promedio de líneas punteadas divisor
var data = new Array (); Data[0] = { labels : ["Unit 1", "Unit 2", "Unit 3", "Unit 4", "Unit 5"], datasets : [ { name : 'Excellence Rate', color:'#1dbcfe', line_width:4, value : [80,75,92,62,0] } ] } Data[1] = { labels : ["Unit 1", "Unit 2", "Unit 3", "Unit 4", "Unit 5"], datasets : [ { name : 'Excellence Rate', color:'#1dbcfe', line_width:4, value : [50,11,62,77,90] } ] } Data[2] = { labels : ["Unit 1", "Unit 2", "Unit 3", "Unit 4", "Unit 5"], datasets : [ { name : 'Excellence Rate', Color: '#1dbcfe', Line_Width: 4, valor: [80,51,32,44,80]}]} var _bodywidth = $ ('cuerpo'). width ()-16; $ ('. item'). Cada (función (i) {var _id = $ (this) .find ('. Canvas-wrap'). attr ('id'); var gráfico = new ichart.lineBasic2d ({render: _id, data: data [i] .datasets, align: 'Center', border: 0, width: _bodywidth*2, altura, altura: _bodyWidth*1.2, background_color: '#fafafa', animation: true, // abre transición animación animación_duración: 600, // 600ms de animación completada sub_option: {smooth: true, hollow: false, hollow_inside: false, punto_size: 16, oyentes: {parsett: function (r, t) {return t+'%}, Etiqueta: {fontSize: 24, color: '#333'},}, coordinado: {width: _bodywidth*1.6, valid_width: _bodywidth*1.4, altura: _bodywidth*1.6*.5, striped_factor: 0.18, axis: {color: '#aaa', width: [0,0,8,8,8,0]},},},}, 0] escala: [{posición: 'izquierda', start_scale: 0, end_scale: 100, scale_space: 20, scale_size: 2, scale_enable: false, etiqueta: {color: '#999', fontsize: 24}, scale_color: '#999'}, {posición: 'Bottom', Labor: {Color: '#999', Fontsize: 24}, 24} False, etiquetas: datos [i] .labels}]}}); $ .each (datos [i] .datasets [0] .Value, function (i, val) {_total+= val;}); Coo.getScale ('Left'), H = Coo.Height, H = (AVG - S.Start) * H / S.Distance, y = Chart.y+H - H; Chart.Target.Textalign ('Start') .TextBaseline ('Middle') .TextFont ('500 20px Verdana').El código anterior es un ejemplo de JS para dibujar múltiples gráficos de línea y un método para dibujar una línea punteada promedio dentro de cada gráfico de línea.
iChart.js es un muy buen icono de dibujo js. La desventaja es que en el lado móvil, primero debe establecer el doble del tamaño, y luego limitarlo manualmente al rango normal con CSS y JS para mantenerlo de alta definición en la pantalla.
Hay ejemplos de dibujos de líneas promedio en el sitio web oficial, pero no hay líneas punteadas. En general, para no confundirse, las líneas promedio se dibujan usando líneas punteadas. Aquí acabo de recorrer la línea recta N-end, que es una solución alternativa. Si hay una mejor manera, deje un mensaje. Gracias.
El código anterior para dibujar líneas punteadas y líneas punteadas igualmente divididas en iChart.js es todo el contenido que comparto con ustedes. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.