Question

我的php页面有多个动态饼图，我希望使用chart.js显示每个图例的图例和标题

这是我的JS代码：

    printf( '<script type="text/javascript" src="django/static/js/Chart.min.js"></script>' );
    printf( '<script type="text/javascript" src="extlib/jquery-min.js"></script>' );
    printf( '<script type="text/javascript">' );
    ?>
    function drawPie(canvasId,data){
    var ctx = $("#pie-canvas-" + canvasId).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代码：

foreach ( $poolArray as $pool ) {//for multiple charts
     $data = statusPool($pool);
     echo '<td style="text-align: center;"><canvas id="pie-canvas-'
          . $canvasId
          . '" width="200" height="200"></canvas>';

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

请建议我为每个饼图设置标题和图例。

Answer 1

请参阅http://www.chartjs.org/docs/#advanced-usage-prototype-methods - generateLegend()对象上的new Chart(ctx).Pie(piedata)方法将返回图例的HTML。然后，您可以将返回值分配给某些DOM元素的innerHTML。

例如，在<div id="legend">元素旁边添加<canvas>元素以保存图例的HTML，然后执行以下操作：

var pc = new Chart(ctx).Pie(piedata);
document.getElementById("legend").innerHTML = pc.generateLegend();

要在图表中添加标题，只需在HTML中添加HTML标题（例如<h3>元素）即可。我认为Chart.js并没有提供自己的标题功能。

如何使用chart.js为多个饼图设置图例和标题

1 个答案: