React-Chart.js堆叠柱状图legend onClick实现单数据集切换显示

1. 配置数据集初始隐藏状态 #

所有堆叠柱状图的数据集统一添加 hidden: true 属性，实现初始加载时全部隐藏的效果，示例代码如下：

const chartData = {
  labels: ['1月', '2月', '3月', '4月'],
  datasets: [
    {
      label: '产品A销量',
      data: [120, 190, 300, 500],
      backgroundColor: '#FF6384',
      hidden: true // 初始隐藏
    },
    {
      label: '产品B销量',
      data: [80, 150, 220, 430],
      backgroundColor: '#36A2EB',
      hidden: true // 初始隐藏
    },
    // 其余所有数据集都按上述规则添加hidden: true配置
  ]
}

2. 自定义图例点击逻辑 #

在图表配置项的 options.plugins.legend 中重写 onClick 回调，实现点击某图例项时仅展示对应数据集、自动隐藏其余所有数据集的效果，示例代码如下：

const chartOptions = {
  plugins: {
    legend: {
      onClick: (event, legendItem, legendInstance) => {
        // 获取当前图表实例的所有数据集
        const allDatasets = legendInstance.chart.data.datasets;
        // 遍历数据集，仅将当前点击的数据集设为可见，其余全部隐藏
        allDatasets.forEach((dataset, index) => {
          dataset.hidden = index !== legendItem.datasetIndex;
        });
        // 刷新图表使配置生效
        legendInstance.chart.update();
      }
    }
  },
  // 保留你原有的坐标轴堆叠等其他配置即可
  scales: {
    x: {
      stacked: true
    },
    y: {
      stacked: true
    }
  }
}

以上配置完成后即可实现需求：初始全隐藏，每次点击图例仅展示选中的单个数据集，同一时间最多展示一个数据集。

内容的提问来源于stack exchange，提问作者user17018145