如何在 angular-chart.js 饼图中制作自定义图例

Question

我在我的网站中使用了 angular-chart.js 来创建饼图，并且我想自定义图例。默认情况下，图例显示颜色和标签。 （如下图所示）我想添加该标签的值/数据，就像它在图表的工具提示中显示的那样。

这是我的 HTML 代码：

<canvas id="pie" class="chart chart-pie"
   chart-data="chartData" chart-labels="chartLabels" chart-options="chartOptions">
</canvas>

根据 angular-chart.js 文档，legend 现在是 Chart.js 选项，因此 chart-legend 属性已被删除。

这就是为什么我尝试在我的 JS 代码中添加generateLabels，以防万一这是我需要自定义图例的原因：

$scope.chartOptions = { 
        legend: {
          display: true,
          labels: {
            generateLabels: function(chart){
              console.log(chart.config);
            }
          }
        }
      };

但是每当我添加这条线时，它都不会显示图表。我认为这是一个错误或什么的。我不确定generateLabels 是否是我需要的正确选项。

有人可以教我自定义图例以实现我想要的正确方法吗？

提前致谢！

Answer 1

让我试着解释一下/回答你的问题：

generateLabels： 确实制作了自定义标签，并替换了 v1 中的模板，但为了使用它，您必须获取图表信息并重新实现图例标签，以遵守文档中的图例项接口和代码。听起来有点神秘，但实际上有点简单，就像这样：

var theHelp = Chart.helpers;
// You need this for later

// Inside Options:
legend: {
display: true,    
// generateLabels changes from chart to chart,  check the source, 
// this one is from the doughnut :
// https://github.com/chartjs/Chart.js/blob/master/src/controllers/controller.doughnut.js#L42
labels: {
  generateLabels: function(chart) {
    var data = chart.data;
    if (data.labels.length && data.datasets.length) {
      return data.labels.map(function(label, i) {
        var meta = chart.getDatasetMeta(0);
        var ds = data.datasets[0];
        var arc = meta.data[i];
        var custom = arc && arc.custom || {};
        var getValueAtIndexOrDefault = theHelp.getValueAtIndexOrDefault;
        var arcOpts = chart.options.elements.arc;
        var fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
        var stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
        var bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);
          return {
          // And finally : 
          text: ds.data[i] + "% of the time " + label,
          fillStyle: fill,
          strokeStyle: stroke,
          lineWidth: bw,
          hidden: isNaN(ds.data[i]) || meta.data[i].hidden,
          index: i
        };
      });
    }
    return [];
  }
}
}

结果：

Codepen：Chart.js Pie Chart Custom Legend Labels

还有其他选择，如果您注意到笔/饼图，切片也有数据信息，即来自插件（检查笔）

还有一个选择，就是在画布上渲染图例标签，例如：

myPieChart.generateLegend();

这给了你这个Html：

"<ul class='0-legend'><li><span style='background-color:black'>  </span>she returns it </li><li><span style='background-color:white'></span>she keeps it</li></ul>"

我还没有尝试过，但我认为您可以使用回调中数据 Legend 的全局方法对其进行修改，它会给您一个 Html 块，您可以将其插入画布之外。