chartjs 3.0 中的 generateLegend() 发生了什么？答案

【问题标题】：What happened to generateLegend() in chartjs 3.0?chartjs 3.0 中的 generateLegend() 发生了什么？
【发布时间】：2022-02-21 00:44:01
【问题描述】：

我的理解是3.0版本已经贬值了。是否有其他方法可以轻松完成图例的自定义？

【问题讨论】：

标签： javascript chart.js chart.js3

【解决方案1】：

是的，有一种非常简单的方法可以使用 plugins 将自定义图例添加到 chartJS 3.5。

这是一个如何工作的示例：

创建您的 DOM 结构以支持新的图例和 chartjs 图表。

<div id="legend-id"></div>
<canvas id="chart-id"></canvas>

使用一些默认数据和选项设置图表以隐藏当前图例。

const data = {
  labels: [
    'Red',
    'Blue',
    'Yellow'
  ],
  datasets: [{
    label: 'My First Dataset',
    data: [300, 50, 100],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
    hoverOffset: 4
  }]
};

const options = {
  plugins: {
    legend: {
        display: false
    }
  }
};

将图表（带有自定义图例）附加到您的 DOM 结构中。

const context = document.querySelector("#chart-id");
const chart = new Chart(context, {
  type: "doughnut",
  data,
  options,
  plugins: [{
    beforeInit: function(chart, args, options) {
      // Make sure we're applying the legend to the right chart
      if (chart.canvas.id === "chart-id") {
        const ul = document.createElement('ul');
        chart.data.labels.forEach((label, i) => {
          ul.innerHTML += `
            <li>
              <span style="background-color: ${ chart.data.datasets[0].backgroundColor[i] }">
                ${ chart.data.datasets[0].data[i] }
              </span>
              ${ label }
            </li>
          `;
        });

        return document.getElementById("js-legend").appendChild(ul);
      }

      return;
    }
  }]  
});

另外，这里有一个带有 custom legend 的工作 jsfiddle！

【讨论】：