angularjs - 如何在 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

让我尝试阐明/回答您的问题:

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

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 [];
  }
}
}

结果:


密码笔: Chart.js Pie Chart Custom Legend Labels

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

还有一种选择是在 Canvas 上渲染图例标签，例如:

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 block ，您可以在 Canvas 上插入。