Chart.js 隱藏圖例 label 時更新圖表？

Question

Chart.js 3 - 我有一個甜甜圈圖，它有一個帶有generateLabels function 的圖例，它根據圖表顏色更改文本顏色。

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