Cet article présente l'exemple de code pour dessiner dynamiquement un diagramme circulaire à l'aide d'un canevas HTML5 et le partage avec tout le monde. Les détails sont les suivants :
Regardons d'abord les rendus
Cela ne fait pas référence à des bibliothèques tierces telles que jquery, mais est écrit à l'aide d'opérations DOM et de fonctionnalités de canevas.
Les cercles de dessin sur toile sont généralement divisés en cercles pleins et cercles creux.
D’après l’analyse de la demande, nous savons que le cercle est un cercle plein.
1. Utilisez d’abord la toile pour dessiner un cercle plein
//Pseudocode var canvas = document.createElement(canvas);var ctx = canvas.getContext('2d');ctx.beginPath();ctx.arc(coordonnée de l'axe x du centre du cercle, coordonnée de l'axe y du centre du cercle, rayon , angle de départ, angle de fin);ctx.fillStyle = 'green';ctx.closePath();ctx.fill();2. Dessinez un diagramme circulaire basé sur différentes couleurs
//Pseudocode var canvas = document.createElement(canvas);var ctx = canvas.getContext('2d');ctx.beginPath();ctx.arc(coordonnée centrale de l'axe x, coordonnée centrale de l'axe y, rayon, vert coin de départ, coin de fin vert);ctx.fillStyle = 'green';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(coordonnée centrale de l'axe x, coordonnée centrale de l'axe y, rayon, angle de départ rouge, angle de fin rouge);ctx .fillStyle = 'red';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc (coordonnée de l'axe x du centre du cercle, coordonnée de l'axe y du centre du cercle, rayon, angle de départ jaune, angle de fin jaune) ;ctx.fillStyle = 'jaune';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc (coordonnée de l'axe x du centre du cercle, coordonnée de l'axe y du centre du cercle, rayon, angle de départ violet, angle de fin violet) ;ctx.fillStyle = 'violet';ctx.closePath();ctx.fill();3. Dessinez dynamiquement des diagrammes circulaires
Trois méthodes sont généralement recommandées sur le site de dessin de cercles dynamiques : requestAnimationFrame, setInterval (timing) et calcul d'angle dynamique.
Ici, j'utilise la première méthode requestAnimationFrame.
Au cours du processus d'écriture, j'ai découvert un problème, c'est-à-dire que lors du dessin dynamique d'un cercle, il n'est pas dessiné en fonction des coordonnées du centre du cercle. Afin de résoudre ce problème, vous devez redéfinir les coordonnées du pinceau pour toile en tant que coordonnées du centre du cercle d'origine chaque fois que vous dessinez un cercle.
<!DOCTYPE html><html><head> <meta charset=utf-8> <title></title> <style> #graph {/* bordure : 1px noir uni hauteur : 100 % ; largeur : 100 % ; box-sizing : border-box;*/ } </style></head><body><div id=circle style=width : 500px;float : gauche;></div></body></html><script type=text/javascript>(function(window,undefined){ var data = [ {produit : produit 1, ventes : [192.44, 210.54, 220.84, 230.11,220.85,210.59,205.49,200.55,195.71 ,187,46 ,180,66 ,170,90]}, {produit:produit2,ventes:[122,41 ,133,16 ,145,65 ,158,00 ,164,84 ,178,62 ,185,70 ,190,13 ,195,53 ,198,88 ,204.32 ,210.91]}, {produit :produit 3,ventes :[170.30 ,175.00 ,170.79 ,165.10 ,165.62 ,160.92 ,155.92 ,145.77 ,145.17 ,140.27 ,135.99 ,130.33]}, {produit :produit 4,ventes :[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 != undefined && dom_circle != null) { var canvas = document.createElement(canvas); dom_circle.appendChild(canvas); 2d'); var defaultStyle = fonction (Dom, toile) { 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 ; autre { toile.hauteur = Dom.clientHeight ; //Zone de l'axe des coordonnées//Notez que la zone réelle du graphique linéaire est légèrement plus petite que ce retour { p1:'green', p2:'red', p3:'jaune', p4:'purple', x: 0 , / /La coordonnée gauche de l'axe de coordonnées sur le canevas y : 0, //La coordonnée supérieure de l'axe de coordonnées sur le canevas maxX : canvas.width, //La coordonnée droite de l'axe de coordonnées sur le canevas maxY : canvas.height , //La coordonnée inférieure de l'axe de coordonnées sur le canevas r:(canvas.width)/2, //Point de départ ry:(canvas.height)/2, //Point de départ cr: (canvas.width)/4, //Rayon startAngle :-(1/2*Math.PI), //Angle de départ endAngle:(-(1/2*Math.PI)+2*Math.PI), //Angle de fin xAngle:1*( Math.PI/ 180) //Décalage}; } //Dessine un cercle var tmpAngle = -(1/2*Math.PI); var ds = null; var sum = data[0]['sales'][0]+data[0 ] ['ventes'][1]+data[0]['ventes'][2]+data[0]['ventes'][3] var percent1 = data[0]['ventes'][0] / somme* Math.PI * 2 ; var pourcentage2 = données[0]['ventes'][1]/somme * Math.PI * 2 + pourcentage1 ; var pourcentage3 = données[0]['ventes'][2]/somme * Math.PI * 2 + pourcentage2 ; var pourcentage4 = données[0]['ventes'][3]/somme * Math.PI * 2 + pourcentage3 ; console.log(pourcent1) ; console.log(percent3); console.log(percent4); var tmpSum = 0; var drawCircle = function(){ if(tmpAngle >= ds.endAngle) { return false; 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 > percent1 && tmpSum <percent2) { 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 > percent2 && tmpSum <percent3) { 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 } else{ ctx); .beginPath(); ctx.moveTo(ds.r,ds.ry); ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle,tmpAngle); ctx.fillStyle = ds.p1; ctx.closePath(); requestAnimationFrame(drawCircle); 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() } }})(window </script>);Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.