饼图重叠在PHP页面

与<canvas>和JavaScript中的JavaScript，我想绘制多个饼图。但图表重叠。饼图重叠在PHP页面

这里我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>是大饼图等小型图表将表进来了。

但所有的图表重叠。

你能告诉我如何摆脱那个重叠。

在此先感谢。

来源

2015-10-19 Nithya.K

你能给我们一个截图或JS小提琴来说明你的问题吗？这会让你更容易理解你的代码。提前致谢！ –

所有的图表在相同的画布上重叠 –

感谢您添加的截图！就我所知，问题在于，所有画布元素都具有相同的ID“mycanvas”。在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标签等。

来源

2015-10-19 09:44:09

@ Jonathan.Thanks for the answer.I尝试了你的代码。这是个好主意。但是在JS代码中'var ctx = $（“＃pie-canvas-”。$ canvasId）.getContext（“2d”）;'它显示错误。如何将$ canvasId传递给JS？能否请你使用JS小提琴分享你的练习？ –

对不起，在JS中合并字符串的方法是使用* plus *。我把它和PHP混淆了，你使用* dot *。我在上面的示例代码中更正了它。我还添加了一些更多的代码示例。让我知道你是否需要更多的帮助！ –

@ Jonathan.Thank你这么多，它现在正在工作。请更多的帮助。在函数drawPie（）我怎么能给每个饼图的传奇和标题？ –

饼图重叠在PHP页面

回答

相关问题