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

I used angular-chart.js in my website to create a Pie chart, and I would like to customize the legend. By default, the legend shows the color and the label. (As shown in the picture below) I would like to add the value/data of that label, like what it shown in the tooltip of the chart.

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

This is my HTML code:

这是我的HTML代码:

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

Based on the angular-chart.js documentation, legend is now a Chart.js option so the chart-legend attribute has been removed.

基于angular-chart.js文档,图例现在是Chart.js选项,因此图表图例属性已被删除。

That is why, in my JS code I've tried to add generateLabels, just in case this is what I need to customize the legend:

这就是为什么在我的JS代码中我试图添加generateLabels,以防这是我需要自定义图例:

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

But whenever I add this lines, it will not show the chart. I think it is an error or something. And I'm not sure, if generateLabels is the right option that I needed.

但每当我添加这些行时,它都不会显示图表。我认为这是一个错误或其他什么。而且我不确定,如果generateLabels是我需要的正确选项。

Can somebody teach me the right way to customize the legend to achieve what I wanted?

有人可以教我正确的方法来定制传奇以实现我想要的吗?

Thanks in advance!

提前致谢!

1 个解决方案

#1

Let me try shedding some light/answering your question:

让我试着解决一些问题/回答你的问题:

generateLabels: does make custom labels,and replaces templates from v1 but in order to use it you have to get your chart information and reimplement legend labels adhering to the Legend Item Interface found in the docs and code. Sounds a bit cryptic, but in practice is somehow simple and goes like this:

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

Result:

Codepen: Chart.js Pie Chart Custom Legend Labels

Codepen:Chart.js饼图自定义图例标签

There are other alternatives, if you notice on the pen/pie, the slices also have data information, that is from a plugin (check the pen)

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

Still another option, is to render the legend labels off canvas,for instance:

还有一个选择是将图例标签渲染出画布,例如:

myPieChart.generateLegend();

Which gives you this Html:

哪个给你这个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>"

I haven't tried it, but I think you can modify it with the global method for your data Legend on the callback an it will give you a block of Html you can insert off canvas.

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

#1