ChartJS实现多数据集分组单点点击选中功能是否可行？

该功能完全可以实现，核心通过自定义图例点击事件+数据集标记分组属性即可完成，适配ChartJS v3/v4主流版本，实现逻辑如下：

1. 为数据集添加分组标识 #

定义图表数据集时，给属于同一分组的所有数据集新增自定义group属性，标记所属分组：

const datasets = [
  // 分组A数据集
  {
    label: '分组A-数据序列1',
    data: [12, 19, 3, 5, 2, 3],
    group: '分组A',
    borderColor: 'rgb(255, 99, 132)'
  },
  {
    label: '分组A-数据序列2',
    data: [7, 11, 5, 8, 3, 7],
    group: '分组A',
    borderColor: 'rgb(255, 159, 64)'
  },
  // 分组B数据集
  {
    label: '分组B-数据序列1',
    data: [3, 5, 15, 9, 12, 6],
    group: '分组B',
    borderColor: 'rgb(54, 162, 235)'
  }
]

2. 重写图例点击事件 #

通过ChartJS的options.plugins.legend.onClick配置覆盖默认点击逻辑，实现点击同组任意图例时，批量切换该分组所有数据集的显示状态：

const chartOptions = {
  plugins: {
    legend: {
      onClick: (event, legendItem, legend) => {
        const chart = legend.chart;
        // 获取点击图例所属的分组
        const targetGroup = chart.data.datasets[legendItem.datasetIndex].group;
        // 取当前点击图例的显示状态作为切换基准
        const isVisibleNow = chart.getDataVisibility(legendItem.datasetIndex);
        // 遍历所有数据集，批量切换同分组数据集的可见性
        chart.data.datasets.forEach((dataset, index) => {
          if (dataset.group === targetGroup) {
            chart.setDataVisibility(index, !isVisibleNow);
          }
        });
        // 刷新图表渲染
        chart.update();
      }
    }
  }
}

版本兼容说明 #

• 如果你使用的是ChartJS v2版本，替换可见性切换逻辑即可：

// ChartJS v2版本适配代码
chart.data.datasets.forEach((dataset, index) => {
  if (dataset.group === targetGroup) {
    dataset.hidden = isVisibleNow;
  }
});

如果需要实现同分组图例视觉上归组展示，可额外通过options.plugins.legend.labels.generateLabels自定义图例项的排版、前缀、缩进等样式。

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