chart.jsスクリプトを使用して複数の円グラフを描画する方法

Question

以下のコードを円グラフに使用しています。同じ円グラフを倍数IDで描画したいとします（例：id="canvas2"）。

chart.jsでこれを行う方法がわかりません。

私を助けてください。

私は私が正しくあなたを理解していれば、

ロジックは、チャートを描画する関数を作成することです。このjsFiddle例に

http://jsfiddle.net/2gapedks/

var data = [ 
 
    { 
 
    value: 300, 
 
    color:"#F7464A", 
 
    highlight: "#FF5A5E", 
 
    label: "Red" 
 
    }, 
 
    { 
 
    value: 50, 
 
    color: "#46BFBD", 
 
    highlight: "#5AD3D1", 
 
    label: "Green" 
 
    }, 
 
    { 
 
    value: 100, 
 
    color: "#FDB45C", 
 
    highlight: "#FFC870", 
 
    label: "Yellow" 
 
    } 
 
]; 
 

 
var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var midX = canvas.width/2; 
 
var midY = canvas.height/2 
 

 
// Create a pie chart 
 
var myPieChart = new Chart(ctx).Pie(data, { 
 
    showTooltips: false, 
 
    onAnimationProgress: drawSegmentValues 
 
}); 
 

 
var radius = myPieChart.outerRadius; 
 

 
function drawSegmentValues() 
 
{ 
 
    for(var i=0; i<myPieChart.segments.length; i++) 
 
    { 
 
    ctx.fillStyle="white"; 
 
    var textSize = canvas.width/10; 
 
    ctx.font= textSize+"px Verdana"; 
 
    // Get needed variables 
 
    var value = myPieChart.segments[i].value; 
 
    var startAngle = myPieChart.segments[i].startAngle; 
 
    var endAngle = myPieChart.segments[i].endAngle; 
 
    var middleAngle = startAngle + ((endAngle - startAngle)/2); 
 

 
    // Compute text location 
 
    var posX = (radius/2) * Math.cos(middleAngle) + midX; 
 
    var posY = (radius/2) * Math.sin(middleAngle) + midY; 
 

 
    // Text offside by middle 
 
    var w_offset = ctx.measureText(value).width/2; 
 
    var h_offset = textSize/4; 
 

 
    ctx.fillText(value, posX - w_offset, posY + h_offset); 
 
    } 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
 
<canvas id="canvas" width=300 height=300></canvas>

Answer 1

を使用していますオンで受け入れたcanvas。このように、あなたはそれぞれcanvasの機能を呼び出すことができます。例えば

：

var allData = 
 
    [ 
 
     [ 
 
     { 
 
      value: 300, 
 
      color:"#F7464A", 
 
      highlight: "#FF5A5E", 
 
      label: "Red" 
 
     }, 
 
     { 
 
      value: 50, 
 
      color: "blue", 
 
      highlight: "#5AD3D1", 
 
      label: "Green" 
 
     }, 
 
     { 
 
      value: 100, 
 
      color: "#FDB45C", 
 
      highlight: "#FFC870", 
 
      label: "Yellow" 
 
     } 
 
     ], 
 
     [ 
 
     { 
 
      value: 200, 
 
      color:"#FF0", 
 
      highlight: "#FF5A5E", 
 
      label: "Red" 
 
     }, 
 
     { 
 
      value: 70, 
 
      color: "purple", 
 
      highlight: "#5AD3D1", 
 
      label: "Green" 
 
     }, 
 
     { 
 
      value: 80, 
 
      color: "pink", 
 
      highlight: "#FFC870", 
 
      label: "Yellow" 
 
     } 
 
     ] 
 
    ]; 
 

 
function draw(canvas, data) { 
 
    var ctx = canvas.getContext("2d"); 
 
    var midX = canvas.width/2; 
 
    var midY = canvas.height/2 
 

 
    // Create a pie chart 
 
    var myPieChart = new Chart(ctx).Pie(data, { 
 
    showTooltips: false, 
 
    onAnimationProgress: drawSegmentValues 
 
    }); 
 

 
    var radius = myPieChart.outerRadius; 
 

 
    function drawSegmentValues() 
 
    { 
 
    for(var i=0; i<myPieChart.segments.length; i++) 
 
    { 
 
     ctx.fillStyle= getTextColor(myPieChart.segments[i].fillColor); 
 
     var textSize = canvas.width/10; 
 
     ctx.font= textSize+"px Verdana"; 
 
     // Get needed variables 
 
     var value = myPieChart.segments[i].value; 
 
     var startAngle = myPieChart.segments[i].startAngle; 
 
     var endAngle = myPieChart.segments[i].endAngle; 
 
     var middleAngle = startAngle + ((endAngle - startAngle)/2); 
 

 
     // Compute text location 
 
     var posX = (radius/2) * Math.cos(middleAngle) + midX; 
 
     var posY = (radius/2) * Math.sin(middleAngle) + midY; 
 

 
     // Text offside by middle 
 
     var w_offset = ctx.measureText(value).width/2; 
 
     var h_offset = textSize/4; 
 

 
     ctx.fillText(value, posX - w_offset, posY + h_offset); 
 
    } 
 
    } 
 
} 
 

 
function getTextColor(color) { 
 
    switch(color) { 
 
    case 'pink': 
 
    default: 
 
     return 'white'; 
 
    case 'blue': 
 
     return 'black'; 
 
    } 
 
} 
 

 
draw(document.getElementById("canvas"), allData[0]); 
 
draw(document.getElementById("canvas2"), allData[1]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
 
<canvas id="canvas" width=300 height=300></canvas> 
 
<canvas id="canvas2" width=300 height=300></canvas>