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

我只需要对齐图表图例，这样它就不会像默认设置那样看起来太乱，下面是我试图实现的一个示例：

请给出一些代码建议：

---

有

legend.labels.generateLabels

hook，您通常可以使用它来定制图例标签。 我发现，您可以使用下面的内容来调整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
}

---

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

Chartjs v2为处理图例创建了开销。基本上，您需要的是利用GenerateLabel的使用

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

这描述了解决方案

这一部分的主要重点是：

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

---

我试着按照上面评论的建议去做。但要看到这真的很难。对我来说，设置更好、更容易：

图例：{display:FALSE，…}`，然后使用html（角度、反应、视图..另一个渲染模板）渲染图例：

//angualr模型类的一部分
公共数据集=[{
标签：“新交易”，
背景色：“88B2FF”，
数据：[26,15,5]，
},
{
标签：“活跃交易”，
背景颜色：“397FFF”，
数据：[7,13,22]，
},
....
this.chart=新图表（ctx{
键入：“圆形条”，
数据：{
标签：this.xLabels，
datasets:this.datasets，
}，

{{set.label}


.传奇{
显示器：flex；
文本对齐：居中；
证明内容：之间的空间；
字体大小：10px；
线高：12px；
}
.图标{
宽度：10px；
高度：10px；
边界半径：50%；
显示：内联块；
}

你找到解决方案了吗？@Notflip，检查答案扫描你发布的generateLabels代码的完整样本？这是我在一个github问题上找到的链接，由OP制作，@tuliomarchetto，它将所有问题都整合到了一起。解决方案：github问题：我们如何为每个标签换行？我认为最好的方法是使用这就是我想要的解决方案。

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