javascript - 饼图在 php 页面中重叠

Question

与 <canvas>和 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>');

PHP代码:

$data  = statusPool($pool);//fetching database values(array() of  label and count )
printf('<canvas id="mycanvas" width="500" height="300"></canvas>');

$data3 = json_encode($data, JSON_NUMERIC_CHECK);
echo '<script type="text/javascript">    drawPie('.$data3.');    </script>';
printf( '<table ><tr>' );

$poolArray =array(//some values) 

$chartCount = 0;
foreach ( $poolArray as $pool ) 
{
     if ($chartCount == 2) 
     {
            printf('</tr><tr>');
            $chartCount = 0;
     }

     printf('<td style="text-align: center;"><canvas id="mycanvas"width="256" height="256"></canvas>');
     $data = statusPool($pool);
     $data3 = json_encode($data2, JSON_NUMERIC_CHECK)
     echo '<script type="text/javascript">    drawPie(' . $data3 . ');</script>';

     $chartCount++;
     printf('</a></td>')
 }
 printf( '</tr></table>' );

第一个<canvas>用于大饼图，其他小图表将出现在表格中。

但是所有的图表都是重叠的。

你能告诉我如何摆脱这种重叠吗。

提前致谢。

Answer 1

感谢您添加屏幕截图!据我所知，问题在于您的所有 Canvas 元素都具有相同的 ID“mycanvas”。在 HTML 中，所有对象都应该有一个唯一的 ID(如果你给它们一个的话)。类可以用于多个对象，一个对象可以有多个类。就像一个公司的所有员工通常都有不同的名字(id)来标识他们，但是几个人可以被分配到一个特定的团队(类)并且人们也可以在多个团队中。如果人们有相同的名字，通常会在办公室引起困惑。你在这里有同样的问题。

要修复它，请给每个 Canvas 一个唯一的 ID。这可能看起来类似于:

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

将您提供给 Canvas 的 ID 传递给绘制它的函数。

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

我真的不知道 $data2 或 $data3 中有什么，但我假设它还包含一些类似 ID 的内容，您可以将其用于此目的。如果不是，则让循环迭代一个变量并将其值用作 ID。当您添加脚本以在循环中绘制当前 pi 时，将 ID 作为参数传递(如果您尚未使用 $data3 执行此操作)并使用

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

顺便说一句。您的代码中存在一些错误，例如缺少分号、未打开或未关闭的 HTML 标记等。