首页 > 解决方案 > 隐藏图例标签时 Chart.js 更新图表?

问题描述

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

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

标签: javascriptchartschart.jsdata-visualization

解决方案


推荐阅读