Question

使用php中的<canvas>和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＆＃34; mycanvas＆＃34;。在HTML中，所有对象都应该具有唯一的ID（如果你给它们一个）。类可以用于多个对象，一个对象可以有多个类。这就像公司的所有员工通常都有不同的名称（id）来识别它们，但是可以为几个人分配一个特定的团队（班级），而且人们也可以在一个以上的团队中。如果人们有相同的名字，通常会导致办公室混乱。你在这里有同样的问题。

要修复它，请为每个画布指定唯一ID。这可能与此类似：

echo '<td style="text-align: center;"><canvas id="pie-canvas-'
   . $canvasId
   . '"width="256" height="256"></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标记等。

饼图在php页面中重叠

1 个答案: