Chart.js 在隐藏图例标签时更新图表？

Question

Chart.js 3 - 我有一个圆环图，其中有一个带有

generateLabels

函数的图例，可以根据图形颜色更改文本颜色。

plugins: {
  legend: {
    labels: {
      generateLabels: (chart) => {
        if (chart.data.labels.length && chart.data.datasets.length) {
          return chart.data.labels.map((label, i) => ({
            text: label,
            fontColor: chart.data.datasets[0].backgroundColor[i],
            fillStyle: chart.data.datasets[0].backgroundColor[i],
            strokeStyle: "#fff",
            hidden: myChart ? myChart.getDatasetMeta(0).data[i].hidden : false,
          }));
        }
      };
    }
  }
}

但是，我需要像以前一样使用默认行为来更新图表，如果图例项目“隐藏”，则折叠图表中的数据。 我可以手动执行此操作，但它具有硬编码值：

onClick: (event, legendItem) => {
  const metaData = myChart.getDatasetMeta(0).data;
  const iData = labs.indexOf(legendItem.text);
  metaData[iData].hidden
    ? (myChart.datasets[0].data[iData] = 0)
    : (myChart.data.datasets[0].data[iData] = 1);
  metaData[iData].hidden = !metaData[iData].hidden;
  myChart.update();
};       

当图例项有删除线并且“隐藏”时，如何获得图表更新的原始行为？

Answer 1

我知道这已经晚了，但我希望这也能帮助其他开发者。

我也遇到过这个问题，我发现每次你尝试点击图例时，

generateLabels

的回调也会执行。

因此您需要在第一代之后使用图表的现有

legendItems

以避免覆盖属性。

plugins: {
          legend: {
            labels: {
              generateLabels: (chart) => {
                if (chart.data.labels.length && chart.data.datasets.length) {
                  return chart.legend.legendItems ?? chart.data.labels.map((label, i) => ({
                    text: label,
                    fontColor: chart.data.datasets[0].backgroundColor[i],
                    fillStyle: chart.data.datasets[0].backgroundColor[i],
                    strokeStyle: '#fff',
                    hidden: myChart ? myChart.getDatasetMeta(0).data[i].hidden : false
                  }));
                }
              },
            },