एकाधिक पाई चार्ट

Question

खींचने के लिए chart.js स्क्रिप्ट का उपयोग कैसे करें मैं पाई चार्ट के लिए नीचे कोड का उपयोग कर रहा हूं और मैं उदाहरण के लिए 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 पर फ़ंक्शन को कॉल कर सकते हैं।

उदाहरण के लिए:

draw(document.getElementById("canvas")); 
draw(document.getElementById("canvas2")); 

निम्नलिखित कोड देखें:

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>