如何使用 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() 对象上的 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 没有提供自己的标题功能。