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文档，图例现在是Chart.js选项，因此图表图例属性已被删除。

这就是为什么在我的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。

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

1 个答案: