如何对齐Chart.js 2中的图例项？ [英] How Align the Legend Items in Chart.js 2?

问题描述

我只需要对齐图表图例，这样它看起来就像默认显示的那样太乱了，这里是我想要实现的一个例子：

I just need to align the Chart Legend so it don't look too messy as the default shows, here is an example what I'm trying to achieve:

new Chart(document.getElementById("field-0"), {
  type: 'pie',
  data: {
    labels: ["Chat", "Prospeção", "Whatsapp", "Trial", "Site", "Telefone", "E-mail", "Evento"],
    datasets: [{
      data: [700, 400, 200, 150, 80, 50, 20, 10],
      borderWidth: 2,
      hoverBorderWidth: 10,
      backgroundColor: pieColors,
      hoverBackgroundColor: pieColors,
      hoverBorderColor: pieColors,
      borderColor: pieColors
    }]
  },
  options: {
    legend: {
      labels: {
        padding: 20
      }
    }
  }
});

推荐答案

legend.labels .generateLabels 您通常可以使用钩子来自定义图例标签。
我发现，你可以输入类似下面的内容来调整Chart.js计算。

There is legend.labels.generateLabels hook you generally can use to customise your legend labels. I found out, that you can put something like below to adjust Chart.js calculations.

generateLabels:  function (chart) {
    chart.legend.afterFit = function () {
      var width = this.width; // guess you can play with this value to achieve needed layout
      this.lineWidths = this.lineWidths.map(function(){return width;});

    };
    // here goes original or customized code of your generateLabels callback
}

奇怪的是，没有实际配置选项来实现这一点。

Weird thing that there is no actual configuration option to achieve this.

这篇关于如何对齐Chart.js 2中的图例项？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！