javascript - 如何使用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-usage-prototype-methods - generateLegend() new Chart(ctx).Pie(piedata)上的方法对象将返回图例的 HTML。然后您可以将返回值分配给 innerHTML一些 DOM 元素。

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

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

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