Круговые диаграммы перекрываются на странице php

Question

С <canvas> и 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> для большой диаграммы пирога и других небольших диаграмм придет в таблицу.

Но все диаграммы перекрываются.

Можете ли вы рассказать мне, как избавиться от этого перекрытия.

Заранее спасибо.

Answer 1

Благодарим Вас за добавление скриншота! Проблема, насколько я вижу, заключается в том, что все ваши элементы холста имеют одинаковый идентификатор «mycanvas». В HTML все объекты должны иметь уникальный идентификатор (если вы дадите их им вообще). Классы могут использоваться для нескольких объектов, и один объект может иметь несколько классов. Это похоже на то, что все сотрудники компании обычно имеют разные имена (id), чтобы идентифицировать их, но нескольким людям может быть назначена определенная команда (класс), и люди также могут быть в нескольких командах. Если люди имеют одно и то же имя, это обычно вызывает путаницу в офисе. У вас такая же проблема.

Чтобы исправить это, дайте каждому холсту уникальный идентификатор. Это может выглядеть примерно так:

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>'; 

Я действительно не знаю, что в $data2 или $data3, но я предполагаю, что она также содержит что-то вроде идентификатора, который вы могли бы использовать для этой цели. Если нет, пусть цикл перебирает переменную и использует ее значение как идентификатор. При добавлении скрипта для рисования текущего пи в петле, передать идентификатор в качестве параметра (если вы еще не делаете это с $data3) и выбрать конкретный холст из документа с помощью

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

Btw. у вас есть некоторые ошибки в вашем коде, такие как отсутствующие точки с запятой, закрытые или незакрытые теги HTML и т. д.