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


How to set legend and title for multiple pie charts using chart.js

我的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>';
   }

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

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

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

var pc = new Chart(ctx).Pie(piedata);
document.getElementById("legend").innerHTML = pc.generateLegend();
要为图表添加标题,只需在HTML中添加HTML标题(例如<h3>元素)。我认为Chart.js没有提供自己的标题功能