Este artigo apresenta o código de exemplo para desenhar dinamicamente um gráfico de pizza usando tela HTML5 e o compartilha com todos.
Vejamos as renderizações primeiro
Isso não se refere a bibliotecas de terceiros, como jquery, mas é escrito usando operações DOM e recursos de canvas.
Os círculos desenhados na tela são geralmente divididos em círculos sólidos e círculos vazios.
De acordo com a análise da procura, sabemos que o círculo é um círculo sólido.
1. Primeiro use a tela para desenhar um círculo sólido
//Pseudocódigo var canvas = document.createElement(canvas);var ctx = canvas.getContext('2d');ctx.beginPath();ctx.arc(coordenada central do eixo x, coordenada central do eixo y, raio, início ângulo, ângulo final);ctx.fillStyle = 'verde';ctx.closePath();ctx.fill();2. Desenhe um gráfico de pizza baseado em cores diferentes
//Pseudocódigo var canvas = document.createElement(canvas);var ctx = canvas.getContext('2d');ctx.beginPath();ctx.arc(coordenada central do eixo x, coordenada central do eixo y, raio, verde canto inicial, canto final verde);ctx.fillStyle = 'green';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(coordenada do eixo x do centro do círculo, coordenada do eixo y do centro do círculo, raio, ângulo inicial vermelho, ângulo final vermelho) ;ctx.fillStyle = 'red';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(coordenada central do eixo x, coordenada central do eixo y, raio, ângulo inicial amarelo, ângulo final amarelo);ctx .fillStyle = 'yellow';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(coordenada do eixo x do centro do círculo, coordenada do eixo y do centro do círculo, raio, ângulo inicial roxo, ângulo final roxo) ;ctx.fillStyle = 'roxo';ctx.closePath();ctx.fill();3. Desenhe gráficos de pizza dinamicamente
Geralmente, três métodos são recomendados no site de desenho de círculo dinâmico: requestAnimationFrame, setInterval (tempo) e cálculo de ângulo dinâmico.
Aqui eu uso o primeiro método requestAnimationFrame.
Durante o processo de escrita, descobri um problema, ou seja, ao desenhar um círculo dinamicamente, ele não é desenhado com base nas coordenadas do centro do círculo. Para resolver esse problema, você precisa redefinir as coordenadas do pincel da tela como as coordenadas do centro do círculo original sempre que desenhar um círculo.
<!DOCTYPE html><html><head> <meta charset=utf-8> <title></title> <style> #graph {/* borda: 1px preto sólido; altura: 100% largura: 100%; tamanho da caixa: border-box;*/ } </style></head><body><div id=circle style=width: 500px;float: left;></div></body></html><script type=text/javascript>(function(window,undefined){ var data = [ {produto: produto 1, vendas: [192,44, 210,54, 220,84, 230,11.220,85.210,59.205,49.200,55.195,71 ,187,46 ,180,66 ,170,90]}, {produto:produto2,vendas:[122,41 ,133,16 ,145,65 ,158,00 ,164,84 ,178,62 ,185,70 ,190,13 ,195,53 ,198,88 ,204,32 ,210,91]}, {produto:produto 3,vendas:[170,30 ,175,00 ,170,79 ,165,10 ,165,62 ,160,92 ,155,92 ,145,77 ,145,17 ,140,27 ,135,99 ,130,33]}, {produto:produto 4,vendas:[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 canvas = document.createElement(canvas); 2d'); var defaultStyle = function(Dom,canvas){ if(Dom.clientWidth <= 300) { canvas.width = 300; Dom.style.overflowX = auto } else{ canvas.width = Dom.clientWidth } if(Dom.clientHeight <= 300) { canvas.height = 300; Dom.style.overflowY = auto } else { canvas.height = Dom.clientHeight } //Área do eixo de coordenadas//Observe que a área real do gráfico de linhas é um pouco menor que este return { p1:'green', p2:'red', p3:'yellow', p4:'purple', x: 0 , / /A coordenada esquerda do eixo de coordenadas na tela y: 0, //A coordenada superior do eixo de coordenadas na tela maxX: canvas.width, //A coordenada direita do eixo de coordenadas na tela maxY: canvas.height , //Coordenadas inferiores do eixo de coordenadas na tela r:(canvas.width)/2, //Ponto inicial ry:(canvas.height)/2, //Ponto inicial cr: (canvas.width)/4, / /Radius startAngle :-(1/2*Math.PI), //Ângulo inicial endAngle:(-(1/2*Math.PI)+2*Math.PI), //Ângulo final xAngle:1*(Math .PI/180) //Deslocamento}; } //Desenhe um círculo var tmpAngle = -(1/2*Math.PI); ['vendas'][1]+dados[0]['vendas'][2]+dados[0]['vendas'][3] var percentual1 = dados[0]['vendas'][0] / soma* Math.PI * 2; var percentual2 = dados[0]['vendas'][1]/soma * Math.PI * 2 + percentual1 = dados[0]['vendas'][2]/soma * Math.PI * 2 + percentual2; var percentual4 = dados[0]['vendas'][3]/soma * Math.PI * 2 + percentual3; console.log(porcentagem3); console.log(porcentagem4); endAngle) { tmpAngle = ds.endAngle } else{ tmpAngle +=; ds.xAngle; tmpSum += ds.xAngle } // console.log(ds.startAngle+'***'+tmpAngle); // console.log(tmpSum); y,canvas.width,canvas.height); if(tmpSum > porcentagem1 && tmpSum <porcentagem2) { ctx.beginPath(); p2; senão if(tmpSum > porcentagem2 && tmpSum <porcentagem3) { ctx.beginPath(); p3; } else if(tmpSum > percent3 ) { ctx.beginPath(); ctx.moveTo(ds.r,ds.ry); .beginPath();ctx.moveTo(ds.r,ds.ry); ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle,tmpAngle); 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 } this.toDraw(); self = this; window.onresize = function(){ self.toDraw() } }})(janela </script>);O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.