如何在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饼图自定义图例标签

还有其他选择,如果你在笔/饼上注意到,切片也有数据信息,即来自插件(检查笔)

另一种选择是将图例标签渲染出画布,例如:

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>"

我没有尝试过,但我认为你可以使用数据的全局方法修改它在回调上它会给你一块你可以插入画布的Html.