In diesem Artikel wird der Beispielcode zum dynamischen Zeichnen eines Kreisdiagramms mithilfe von HTML5 Canvas vorgestellt und für alle freigegeben. Die Details lauten wie folgt:
Schauen wir uns zunächst die Renderings an
Dies bezieht sich nicht auf Bibliotheken von Drittanbietern wie jquery, sondern wird mithilfe von DOM-Operationen und Canvas-Funktionen geschrieben.
Zeichenkreise auf Leinwand werden im Allgemeinen in Vollkreise und Hohlkreise unterteilt.
Aus der Bedarfsanalyse wissen wir, dass der Kreis ein durchgezogener Kreis ist.
1. Zeichnen Sie zunächst mit der Leinwand einen vollen Kreis
//Pseudocode var canvas = document.createElement(canvas);var ctx = canvas.getContext('2d');ctx.beginPath();ctx.arc(Koordinate der x-Achse des Kreismittelpunkts, y-Achsenkoordinate des Kreismittelpunkts, Radius , Startwinkel, Endwinkel);ctx.fillStyle = 'green';ctx.closePath();ctx.fill();2. Zeichnen Sie ein Kreisdiagramm basierend auf verschiedenen Farben
//Pseudocode var canvas = document.createElement(canvas);var ctx = canvas.getContext('2d');ctx.beginPath();ctx.arc(koordinate der mittleren x-Achse, mittlere Koordinate der y-Achse, Radius, grün Startecke, grüne Endecke);ctx.fillStyle = 'green';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(Mittelkoordinate der X-Achse, Mittelkoordinate der Y-Achse, Radius, roter Startwinkel, roter Endwinkel);ctx .fillStyle = 'red';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(Koordinate der x-Achse des Kreismittelpunkts, y-Achsenkoordinate des Kreismittelpunkts, Radius, gelber Startwinkel, gelber Endwinkel) ;ctx.fillStyle = 'gelb';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(Koordinate der x-Achse des Kreismittelpunkts, y-Achsenkoordinate des Kreismittelpunkts, Radius, violetter Startwinkel, violetter Endwinkel) ;ctx.fillStyle = 'purple';ctx.closePath();ctx.fill();3. Zeichnen Sie Kreisdiagramme dynamisch
Auf der Website zum Zeichnen dynamischer Kreise werden im Allgemeinen drei Methoden empfohlen: requestAnimationFrame, setInterval (Timing) und dynamische Winkelberechnung.
Hier verwende ich die erste requestAnimationFrame-Methode.
Während des Schreibvorgangs entdeckte ich ein Problem: Beim dynamischen Zeichnen eines Kreises wird dieser nicht anhand der Koordinaten des Kreismittelpunkts gezeichnet. Um dieses Problem zu lösen, müssen Sie jedes Mal, wenn Sie einen Kreis zeichnen, die Koordinaten des Leinwandpinsels als Koordinaten des ursprünglichen Kreismittelpunkts neu definieren.
<!DOCTYPE html><html><head> <meta charset=utf-8> <title></title> <style> #graph {/* border: 1px solid black; width: 100%; box-sizing: 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 = [ {Produkt: Produkt 1, Umsatz: [192,44, 210,54, 220,84, 230,11.220,85.210,59.205,49.200,55.195,71 ,187,46 ,180,66 ,170,90]}, {product:product2,sales:[122,41 ,133,16 ,145,65 ,158,00 ,164,84 ,178,62 ,185,70 ,190,13 ,195,53 ,198,88 ,204,32 ,210,91]}, {Produkt:Produkt 3,Umsatz:[170,30 ,175,00 ,170,79 ,165,10 ,165,62 ,160,92 ,155,92 ,145,77 ,145,17 ,140,27 ,135,99 ,130,33]}, {Produkt:Produkt 4,Umsatz:[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 != undefiniert && dom_circle != null) { var canvas = document.createElement(canvas); var ctx = canvas.getContext(' 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; //Bereich der Koordinatenachse//Beachten Sie, dass der tatsächliche Bereich des Liniendiagramms etwas kleiner ist als dieser return { p1:'green', p2:'red', p3:'yellow', p4:'purple', x: 0 , / /Die linke Koordinate der Koordinatenachse auf der Leinwand y: 0, //Die obere Koordinate der Koordinatenachse auf der Leinwand maxX: canvas.width, //Die rechte Koordinate der Koordinatenachse auf der Leinwand maxY: canvas.height , //Die untere Koordinate der Koordinatenachse auf der Leinwand r:(canvas.width)/2, //Startpunkt ry:(canvas.height)/2, //Startpunkt cr: (canvas.width)/4, //Radius startAngle :-(1/2*Math.PI), //Startwinkel endAngle:(-(1/2*Math.PI)+2*Math.PI), //Endwinkel xAngle:1*( Math.PI/ 180) //Offset}; } //Zeichne einen Kreis var tmpAngle = -(1/2*Math.PI); var ds = null; ['Umsätze'][1]+Daten[0]['Umsätze'][2]+Daten[0]['Umsätze'][3] var prozent1 = Daten[0]['Umsätze'][0] / Summe* Math.PI * 2; var prozent2 = data[0]['umsatz'][1]/summe * Math.PI * 2 + var prozent3 = daten[0]['umsatz'][2]/summe * Math.PI * 2 + Prozent2; var Prozent4 = Daten[0]['Umsätze'][3]/Summe * Math.PI * 2 + Prozent3; console.log(percent3); console.log(percent4); 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); // ctx.clearRect(ds.x,ds. 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); 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); 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); ctx.fillStyle = 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.fill(); requestAnimationFrame 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);Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.