この記事では、html5キャンバスを使って円グラフを動的に描画するサンプルコードを紹介し、皆さんに共有します。詳細は次のとおりです。
まずはレンダリングを見てみましょう
これは jquery などのサードパーティ ライブラリを参照するのではなく、DOM 操作とキャンバス機能を使用して記述されます。
キャンバスの描画円は、一般に実線の円と中空の円に分けられます。
需要分析によれば、円は実線の円であることがわかります。
1.まずキャンバスを使って実線の円を描きます
//疑似コード var Canvas = document.createElement(canvas);var ctx = Canvas.getContext('2d');ctx.beginPath();ctx.arc(円中心の X 軸座標、円中心の Y 軸座標、半径、開始角度、終了角度);ctx.fillStyle = 'green';ctx.closePath();ctx.fill();2. さまざまな色に基づいて円グラフを描画します
//疑似コード var Canvas = document.createElement(canvas);var ctx = Canvas.getContext('2d');ctx.beginPath();ctx.arc(中心の X 軸座標、中心の Y 軸座標、半径、緑開始コーナー、緑の終了コーナー);ctx.fillStyle = 'green';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(中心 X 軸座標、中心 Y 軸座標、半径、赤の開始角度、赤の終了角度);ctx .fillStyle = 'red';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(円の中心の X 軸座標、円の中心の Y 軸座標、半径、黄色の開始角度、黄色の終了角度) ;ctx.fillStyle = ' yellow';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(円の中心 x 軸座標、円の中心 y 軸座標、半径、紫色の開始角度、紫色の終了角度) ;ctx.fillStyle = 'purple';ctx.closePath();ctx.fill();3. 円グラフを動的に描画する
動的円描画 Web サイトでは、通常、requestAnimationFrame、setInterval (タイミング)、および動的角度計算の 3 つの方法が推奨されます。
ここでは最初の requestAnimationFrame メソッドを使用します。
書いている途中で、動的に円を描画する際に、円の中心の座標に基づいて円が描画されないという問題を発見しました。この問題を解決するには、円を描画するたびにキャンバス ブラシの座標を元の円の中心の座標として再定義する必要があります。
<!DOCTYPE html><html><head> <meta charset=utf-8> <title></title> <style> #graph {/* 境界線: 1px 高さ: 100%; 幅: 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,unknown){ var data = [ {product: product 1, sales: [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]}, {製品:製品 3,販売:[170.30 ,175.00 ,170.79 ,165.10 ,165.62 ,160.92 ,155.92 ,145.77 ,145.17 ,140.27 ,135.99 ,130.33]}, {製品: 製品 4,販売:[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 != 未定義 && dom_circle != null) { var Canvas = document.createElement(canvas); var ctx = Canvas.getContext(' 2d'); var デフォルトスタイル = 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 = } else { キャンバスの高さ = Dom.clientHeight } //座標軸の領域//実際の折れ線グラフの領域はこれよりわずかに小さいことに注意してください return { p1:'green', p2:'red', p3:' yellow', p4:'purple', x: 0 , / /キャンバス上の座標軸の左座標 y: 0, //キャンバス上の座標軸の上の座標 maxX: Canvas.width, // キャンバス上の座標軸の右座標 maxY: Canvas.height 、 //キャンバス上の座標軸の下の座標 r:(canvas.width)/2, //始点 ry:(canvas.height)/2, //始点 cr:(canvas.width)/4, //半径 startAngle :-(1/2*Math.PI), //開始角度 endAngle:(-(1/2*Math.PI)+2*Math.PI), //終了角度 xAngle:1*(数学PI/180) //Offset}; } //円を描く var tmpAngle = -(1/2*Math.PI) var ds = null; ['売上'][1]+データ[0]['売上'][2]+データ[0]['売上'][3] var パーセント1 = データ[0]['売上'][0] /和* Math.PI * 2; var パーセント 2 = データ[0]['売上'][1]/合計 * Math.PI * 2 + パーセント 1 = データ[0]['売上'][2]/合計 * Math.PI * 2 + パーセント 2; var パーセント 4 = データ[0]['売上'][3]/合計 * Math.PI * 2 + パーセント 3; console.log(percent3); console.log(percent4); var tmpSum = 0; vardrawCircle = 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 > パーセント 1 && tmpSum <パーセント 2) { ctx.beginPath(); ctx.moveTo(ds.r,ds.ry); ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle+percent1,tmpAngle); p2; } else if(tmpSum > パーセント2 && tmpSum <パーセント3) { ctx.beginPath(); ctx.moveTo(ds.r,ds.ry); ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle+percent2,tmpAngle); p3; } else if(tmpSum > パーセント 3 ) { ctx.beginPath(); ctx.moveTo(ds.r,ds.ry); ctx.arc(ds.r,ds.ry,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(); 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 = this; window.onresize = function(){ self.toDraw() }})(ウィンドウ);以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。