Birden çok pasta çizmek için chart.js komut dosyası nasıl kullanılır? Grafikler

Question

Pasta grafik için aşağıdaki kodu kullanıyorum ve aynı pasta grafiğini, örneğin id="canvas2" için çoğulları kimlikleri ile çizmek istiyorum.

Grafik.js ile bunu nasıl yapacağımı bilmiyorum?

Lütfen bana yardım edin.

Bu jsFiddle örnek

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>

Ben doğru anlamak

Answer 1

,

mantık grafiği çizmek bir işlev oluşturmaktır kullanıyorum kabul edildi canvas. Bu şekilde, istediğiniz her canvas işlevini çağırabilirsiniz.

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>