ChartJS中通过图例隐藏数据集时如何隐藏对应Y轴？

你遇到的问题核心是：修改Y轴的display属性后，没有调用图表的update()方法触发视图刷新，所以配置变更不会在图表上生效。下面是具体的实现步骤和代码示例：

关键解决步骤 #

• 保留图例点击的默认逻辑（切换数据集可见性）
• 通过数据集的yAxisID找到对应的Y轴
• 切换Y轴的display状态，与数据集可见性联动
• 调用chart.update()让图表刷新配置

完整代码示例 #

// 初始化图表
const chart = new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: ['1月', '2月', '3月', '4月'],
    datasets: [
      {
        label: '数据集1',
        data: [10, 20, 15, 25],
        yAxisID: 'y', // 对应默认左侧Y轴
        borderColor: '#ff4444'
      },
      {
        label: '数据集2',
        data: [100, 200, 150, 250],
        yAxisID: 'y1', // 对应右侧第一个Y轴
        borderColor: '#33b5e5'
      },
      {
        label: '数据集3',
        data: [1000, 2000, 1500, 2500],
        yAxisID: 'y2', // 对应右侧第二个Y轴
        borderColor: '#99cc00'
      }
    ]
  },
  options: {
    scales: {
      y: {
        type: 'linear',
        position: 'left',
        display: true
      },
      y1: {
        type: 'linear',
        position: 'right',
        display: true,
        grid: { drawOnChartArea: false } // 避免网格重叠
      },
      y2: {
        type: 'linear',
        position: 'right',
        display: true,
        grid: { drawOnChartArea: false },
        offset: true // 偏移避免与y1轴重叠
      }
    },
    plugins: {
      legend: {
        onClick: function(e, legendItem) {
          // 获取当前点击的数据集和对应Y轴
          const datasetIndex = legendItem.datasetIndex;
          const targetDataset = chart.data.datasets[datasetIndex];
          const targetYAxis = chart.scales[targetDataset.yAxisID];

          // 切换数据集可见性（保留默认图例逻辑）
          targetDataset.hidden = !targetDataset.hidden;

          // 同步切换Y轴显示状态
          targetYAxis.display = !targetDataset.hidden;

          // 关键：更新图表使配置生效
          chart.update();
        }
      }
    }
  }
});

扩展场景：多数据集共享同一Y轴 #

如果有多个数据集绑定到同一个Y轴，需要判断该轴对应的所有数据集是否都被隐藏，再决定是否隐藏轴，示例代码如下：

onClick: function(e, legendItem) {
  const datasetIndex = legendItem.datasetIndex;
  const targetDataset = chart.data.datasets[datasetIndex];
  const targetYAxisID = targetDataset.yAxisID;
  const targetYAxis = chart.scales[targetYAxisID];

  // 切换当前数据集可见性
  targetDataset.hidden = !targetDataset.hidden;

  // 判断该Y轴下所有数据集是否都已隐藏
  const allDatasetsHidden = chart.data.datasets
    .filter(ds => ds.yAxisID === targetYAxisID)
    .every(ds => ds.hidden);

  // 仅当所有数据集都隐藏时，才隐藏对应Y轴
  targetYAxis.display = !allDatasetsHidden;

  chart.update();
}

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