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

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-用法原型方法-对象上的new Chart（ctx）.Pie（piedata）方法将返回图例的HTML。然后可以将返回值分配给某个DOM元素的innerHTML。

例如，添加一个

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

要在图表中添加标题，只需添加一个HTML标题（例如