Javascript 饼图在php页面中重叠

使用php中的

和JavaScript，我试图绘制多个饼图，但这些饼图是重叠的

下面是我的javascript代码：

printf('<script type="text/javascript">');
?>
function drawPie(data)
{
    var ctx = $("#mycanvas").get(0).getContext("2d");
    var piedata = [];
    $.each(data,function(i,val){
       piedata.push({value:val.count,color:val.color,label:val.status});
    });
    new Chart(ctx).Pie(piedata);
 }
<?php
printf('</script>');

printf（“”）；
?>
函数drawPie（数据）
{
var ctx=$（“#mycanvas”）.get（0.getContext（“2d”）；
var piedata=[]；
$。每个（数据、函数（i、val）{
push（{value:val.count，color:val.color，label:val.status}）；
});
新图表（ctx）、饼图（piedata）；
}
感谢您添加截图！据我所知，问题是，您的所有画布元素都具有相同的ID“mycanvas”。在HTML中，所有对象都应该有一个唯一的ID（如果您给它们一个ID的话）。类可以用于多个对象，并且一个对象可以有多个类。这就像一家公司的所有员工通常都有不同的姓名（id）来识别他们一样，但是可以将几个人分配到一个特定的团队（类），也可以将他们分配到多个团队中。如果人们有相同的名字，通常会引起办公室的混乱。你也有同样的问题

要修复此问题，请为每个画布指定一个唯一的id。这可能类似于：

echo '<td style="text-align: center;"><canvas id="pie-canvas-'
   . $canvasId
   . '"width="256" height="256"></canvas>';

顺便说一句，您的代码中有一些错误，如缺少分号、未打开或未关闭的HTML标记等。
您能给我们一个屏幕截图或JS提琴来说明您的问题吗？这将使您更容易理解代码。提前谢谢！所有图表都在同一个位置重叠canvas@Jonathan.Thanks为了得到答案，我试用了你的代码。这是个好主意。但是在JS代码
var ctx=$（“#pie canvas-”$canvasId）它显示错误。如何将$canvasId传递到JS？能否请您使用JS fiddle分享您在这方面的练习？对不起，在JS中组合字符串的最佳方法是使用加号。我把它和PHP混淆了，在PHP中使用了一个点。我在上面的示例代码中更正了它。我还添加了一些进一步的代码示例。如果你需要更多的帮助，请告诉我@Jonathan。非常感谢。它正在工作。请再提供一个帮助。在函数drawPie（）中，我如何为每个饼图提供图例和标题？当前每个饼图的标签不可见（仅在鼠标上方），很高兴我能提供帮助！我是否理解你的意思，你想把图表的图例也放在画布上？那么这在很大程度上取决于实际绘制图表的函数（在您的例子中是类图表或饼图的方法）。您还可以在
newchart（ctx）.Pie（piedata）之后绘制或向画布添加文本使用JavaScript的常规绘制方法绘制画布元素。如果您在这方面需要确切的帮助，我建议您打开一个新问题，向我们展示一些在画布上绘制饼图的代码。
echo '<td style="text-align: center;"><canvas id="pie-canvas-'
   . $canvasId
   . '"width="256" height="256"></canvas>';

echo '<script type="text/javascript">drawPie('
   . $canvasId
   . ', '
   . $data3
   . ');</script>';

function drawPie(canvasId, data) {
    [...]
    var ctx = $("#pie-canvas-" + canvasId).getContext("2d");
    [...]
}