如何在Chart.js中实现单个图例关联并控制两条折线？

要让一个图例项同时控制多条折线的显隐，Chart.js没有原生支持，得通过自定义图例的过滤和点击事件来实现，具体做法如下：

步骤1：配置数据集 #

把需要关联的两个数据集设置成相同的label，同时可以给它们设置不同的样式（比如颜色）区分：

const datasets = [
  {
    label: 'Feeder 1',
    data: [12, 19, 3, 17, 6, 3, 7],
    borderColor: '#ff6384',
    backgroundColor: 'rgba(255,99,132,0.1)'
  },
  {
    label: 'Feeder 1', // 和上面的label保持一致
    data: [2, 29, 5, 5, 2, 3, 10],
    borderColor: '#36a2eb',
    backgroundColor: 'rgba(54,162,235,0.1)'
  },
  {
    label: 'Feeder 2',
    data: [5, 10, 15, 20, 25, 30, 25],
    borderColor: '#cc65fe',
    backgroundColor: 'rgba(204,101,254,0.1)'
  }
];

步骤2：自定义图例逻辑 #

在图表的options里配置图例的过滤规则和点击事件：

const options = {
  legend: {
    // 过滤重复图例项，每个label只保留第一个实例
    labels: {
      filter: function(item, chart) {
        const firstIndex = chart.data.datasets.findIndex(ds => ds.label === item.text);
        return chart.legend.legendItems.indexOf(item) === firstIndex;
      }
    },
    // 自定义点击事件，统一切换同label数据集的显隐状态
    onClick: function(e, legendItem) {
      const targetLabel = legendItem.text;
      this.chart.data.datasets.forEach(dataset => {
        if (dataset.label === targetLabel) {
          dataset.hidden = !dataset.hidden;
        }
      });
      this.chart.update();
    }
  }
};

完整示例代码 #

把配置整合到图表初始化中：

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    datasets: datasets
  },
  options: options
});

原理说明 #

• 用filter函数确保同一个label只显示一个图例项，避免界面出现重复图例。
• 自定义onClick事件，点击图例时遍历所有数据集，将同label的数据集hidden状态统一切换，最后更新图表完成显隐同步。

这样点击“Feeder 1”图例时，两条关联的折线就会同时显示或隐藏，完全符合需求。

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