如何使用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>