如何对齐Chart.js 2中的图例项？

Question

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

请提供一些代码建议： https ： //jsfiddle.net/holp/68wf75r8/

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
      }
    }
  }
});

Answer 1

您可以使用legend.labels.generateLabels钩子来自定义图例标签。 我发现，你可以把下面这样的东西调整成Chart.js计算。

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
}

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

Answer 2

Chartjs v2创建了处理图例的开销。 基本上你要寻找的是利用generateLabels的用法。

要记住的关键点是您需要返回一个有效的图例对象数组 。

这个plunker描述了解决方案。

主要关注这一部分：

generateLabels: (chart) => {

  chart.legend.afterFit = function () {
    var width = this.width; 
    console.log(this);

    this.lineWidths = this.lineWidths.map( () => this.width-12 );

    this.options.labels.padding = 30;
    this.options.labels.boxWidth = 15;
  };

  var data = chart.data;
  //https://github.com/chartjs/Chart.js/blob/1ef9fbf7a65763c13fa4bdf42bf4c68da852b1db/src/controllers/controller.doughnut.js
  if (data.labels.length && data.datasets.length) {
    return data.labels.map((label, i) => {
      var meta = chart.getDatasetMeta(0);
      var ds = data.datasets[0];
      var arc = meta.data[i];
      var custom = arc && arc.custom || {};
      var getValueAtIndexOrDefault = this.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 {
        text: label,
        fillStyle: fill,
        strokeStyle: stroke,
        lineWidth: bw,
        hidden: isNaN(ds.data[i]) || meta.data[i].hidden,

        // Extra data used for toggling the correct item
        index: i
      };
    });
  }
  return [];
}