Chart.js多数据集折线图如何实现每次仅显示一条折线的互斥切换

完全可以通过配置实现需求，只需调整数据集初始状态、重写图例点击回调两个部分即可，修改后的完整代码如下：

public barChartOptions: ChartOptions = {
    indexAxis: 'x',
    responsive: true,
    plugins: {
      legend: {
        onClick: (e, legendItem, legend) => {
          const chart = legend.chart;
          const clickedIndex = legendItem.datasetIndex;
          // 遍历所有数据集，仅保留点击的数据集为显示状态
          chart.data.datasets.forEach((dataset, i) => {
            dataset.hidden = i !== clickedIndex;
          });
          chart.update();
        }
      }
    }
  };
  public barChartLabels: string[] = this.xLabels;
  public barChartType: ChartType = 'line';
  public barChartLegend = true;
  public barChartData: ChartDataset[] = [
    {
      data: [],
      backgroundColor: 'green',
      borderColor: 'rgb(75, 192, 192)',
      label: 'Volume [m3]',
      fill: false,
      hidden: true // 初始隐藏第一条，默认显示第二条数据集
    },
    {
      data: [],
      backgroundColor: 'red',
      borderColor: 'rgb(255, 127, 127)',
      label: 'Flow [m3/h]',
      fill: false
    }
  ];

配置说明 #

• 初始加载默认仅展示Flow [m3/h]数据集，符合你要求的第二/第三张示例图效果，如需默认展示第一条，只需把hidden: true配置移到第二个数据集即可。
• 重写了图例点击逻辑，点击任意图例项时会自动隐藏另一个数据集，仅保留当前点击的数据集可见，彻底避免两个量级差异过大的数据集同时展示导致的折线显示异常问题。

效果参考 #

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