Este artículo presenta el código de muestra para dibujar dinámicamente un gráfico circular usando un lienzo html5 y lo comparte con todos. Los detalles son los siguientes:
Veamos primero las representaciones.
Esto no se refiere a bibliotecas de terceros como jquery, sino que está escrito utilizando operaciones DOM y funciones de lienzo.
Los círculos de dibujo en lienzo generalmente se dividen en círculos sólidos y círculos huecos.
Según el análisis de la demanda, sabemos que el círculo es un círculo sólido.
1. Primero usa el lienzo para dibujar un círculo sólido.
//Pseudocódigo var canvas = document.createElement(canvas);var ctx = canvas.getContext('2d');ctx.beginPath();ctx.arc(coordenada del eje x del centro del círculo, coordenada del eje y del centro del círculo, radio , ángulo inicial, ángulo final);ctx.fillStyle = 'green';ctx.closePath();ctx.fill();2. Dibuja un gráfico circular basado en diferentes colores.
//Pseudocódigo var canvas = document.createElement(canvas);var ctx = canvas.getContext('2d');ctx.beginPath();ctx.arc(coordenada central del eje x, coordenada central del eje y, radio, verde esquina inicial, esquina final verde);ctx.fillStyle = 'green';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(coordenada central del eje x, coordenada central del eje y, radio, ángulo inicial rojo, ángulo final rojo);ctx .fillStyle = 'red';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(coordenada del eje x del centro del círculo, coordenada del eje y del centro del círculo, radio, ángulo inicial amarillo, ángulo final amarillo) ;ctx.fillStyle = 'amarillo';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(coordenada del eje x del centro del círculo, coordenada del eje y del centro del círculo, radio, ángulo inicial morado, ángulo final morado) ;ctx.fillStyle = 'púrpura';ctx.closePath();ctx.fill();3. Dibujar dinámicamente gráficos circulares
Generalmente se recomiendan tres métodos en el sitio web de dibujo de círculos dinámicos: requestAnimationFrame, setInterval (sincronización) y cálculo de ángulo dinámico.
Aquí utilizo el primer método requestAnimationFrame.
Durante el proceso de escritura, descubrí un problema, es decir, al dibujar un círculo dinámicamente, no se dibuja en función de las coordenadas del centro del círculo. Para resolver este problema, cada vez que dibuja un círculo, debe redefinir las coordenadas del pincel del lienzo como las coordenadas del centro del círculo original.
<!DOCTYPE html><html><head> <meta charset=utf-8> <title></title> <style> #graph {/* borde: 1px negro sólido; alto: 100%; ancho: 100%; tamaño de caja: border-box;*/ } </style></head><body><div id=circle style=width: 500px;float: left;></div></body></html><script type=text/javascript>(function(window,undefinido){ var data = [ {producto: producto 1, ventas: [192.44, 210.54, 220.84, 230,11.220,85.210,59.205,49.200,55.195,71 ,187.46 ,180.66 ,170.90]}, {producto:producto2,ventas:[122.41 ,133.16 ,145.65 ,158.00 ,164.84 ,178.62 ,185.70 ,190.13 ,195.53 ,198.88 ,204.32 ,210.91]}, {producto:producto 3,ventas:[170.30 ,175.00 ,170.79 ,165.10 ,165.62 ,160.92 ,155.92 ,145.77 ,145.17 ,140.27 ,135.99 ,130.33]}, {producto:producto 4,ventas:[165.64,170.15,175.10,185.32,190.90,190.01,187.05,183.74,177.24,181.90,179.54,175.98]}] var dom_circle = document.getElementById('circle'); if(dom_circle!= indefinido && dom_circle!= null) { var lienzo = document.createElement(canvas); dom_circle.appendChild(canvas) = canvas.getContext('); 2d'); var estilo predeterminado = función (Dom, lienzo) { if(Dom.clientWidth <= 300) { lienzo.width = 300; Dom.style.overflowX = auto } else{ lienzo.width = Dom.clientWidth } if(Dom.clientHeight <= 300) { lienzo.altura = 300; Dom.style.overflowY = auto; más { lienzo.height = Dom.clientHeight } //Área del eje de coordenadas//Tenga en cuenta que el área del gráfico de líneas real es ligeramente más pequeña que este retorno { p1:'green', p2:'red', p3:'amarillo', p4:'purple', x: 0, / / La coordenada izquierda del eje de coordenadas en el lienzo y: 0, // La coordenada superior del eje de coordenadas en el lienzo maxX: canvas.width, // La coordenada derecha del eje de coordenadas en el lienzo maxY: canvas.height , // La coordenada inferior del eje de coordenadas en el lienzo r:(canvas.width)/2, //Punto de inicio ry:(canvas.height)/2, //Punto de inicio cr: (canvas.width)/4, //Radio startAngle :-(1/2*Math.PI), //Ángulo inicial endAngle:(-(1/2*Math.PI)+2*Math.PI), //Ángulo final xAngle:1*( Matemáticas.PI/ 180) //Offset}; } //Dibujar un círculo var tmpAngle = -(1/2*Math.PI var ds = null; ['ventas'][1]+datos[0]['ventas'][2]+datos[0]['ventas'][3] var porcentaje1 = datos[0]['ventas'][0] / suma* Math.PI * 2; var porcentaje2 = datos[0]['ventas'][1]/suma * Math.PI * 2 + porcentaje1 var = datos[0]['ventas'][2]/suma * Math.PI * 2 + porcentaje2; var porcentaje4 = datos[0]['ventas'][3]/suma * Math.PI * 2 + porcentaje3; console.log(percent3); console.log(percent4); var tmpSum = 0; var drawCircle = function(){ if(tmpAngle >= ds.endAngle) { return false } else if(tmpAngle+ ds.xAngle > ds. endAngle) { tmpAngle = ds.endAngle } else{ tmpAngle += ds.xAngle; tmpSum += ds.xAngle } // console.log(ds.startAngle+'***'+tmpAngle); // console.log(tmpSum); // ctx.clearRect(ds.x,ds. y,canvas.width,canvas.height); if(tmpSum > porcentaje1 && tmpSum <porcentaje2) { ctx.beginPath(); ctx.moveTo(ds.r,ds.ry); ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle+percent1,tmpAngle = ds. p2; } else if(tmpSum > porcentaje2 && tmpSum <porcentaje3) { ctx.beginPath(); ctx.moveTo(ds.r,ds.ry); ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle+percent2,tmpAngle = ds. p3; } else if(tmpSum > percent3 ) { ctx.beginPath(); ctx.moveTo(ds.r,ds.ry); ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle+percent3,tmpAngle = ds.p4; .beginPath(); ctx.moveTo(ds.r,ds.ry); ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle,tmpAngle); ctx.fillStyle = ds.p1; } ctx.closePath(); this.toDraw = function(){ ds= defaultStyle(dom_circle,canvas); console.log(tmpAngle); // console.log(ds.xAngle) ctx.clearRect(ds.x,ds.y,canvas.width,canvas.height(); self = esto; ventana.onresize = function(){ self.toDraw() } }})(ventana </script>);Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.