chart.js饼图 php,javascript – 如何使用chart.js脚本绘制多个饼图

如果我理解正确,

逻辑是创建一个在接受的画布上绘制图表的函数.这样,你可以在你想要的每个画布上调用该函数.

例如：

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

{

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]);