如何在Chart.js中隐藏所有数据集时完全隐藏Y轴

这个需求很常见，咱们可以通过监听图例的点击事件，每次点击后检查所有数据集的显示状态，动态切换Y轴的显示/隐藏，具体实现步骤如下：

实现思路 #

1. 监听图例点击：在图表配置的options.legend中自定义onClick方法，确保点击图例时先执行默认的数据集显示切换逻辑，再进行状态检查。
2. 检查数据集状态：遍历所有数据集，判断是否全部处于隐藏状态。
3. 动态更新Y轴显示：根据检查结果，修改Y轴的display属性，然后调用图表的update()方法刷新视图。

修改后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<html>
<body>
  <div class="myChartDiv">
    <canvas id="myChart" width="600" height="800"></canvas>
  </div>
</body>
</html>

.myChartDiv {
  width: 600px;
  height: 800px;
}

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [1510001367000, 1510001379000, 1510001415000, 1510001427000, 1510001443000, 1510001477000, 1510001555000, 1510001587000, 1510001621000, 1510001652000, 1510001680000, 1510001700000, 1510001712000, 1510001744000, 1510001756000, 1510001762000, 1510001768000, 1510001796000, 1510001805000, 1510001860000, 1510001888000, 1510001916000, 1510001952000, 1510001956000, 1510001984000, 1510002006000, 1510002016000, 1510002073000, 1510002185000, 1510002213000, 1510002253000, 1510002259000, 1510002283000, 1510002317000, 1510002325000, 1510002393000, 1510002494000, 1510002510000, 1510002554000, 1510002572000, 1510002588000, 1510002618000, 1510002634000, 1510002648000, 1510002658000, 1510002678000, 1510002694000, 1510002702000, 1510002722000, 1510002732000, 1510002782000, 1510002800000, 1510002808000, 1510002814000, 1510002830000, 1510002884000, 1510002947000, 1510002953000, 1510002979000, 1510002995000, 1510003039000, 1510003067000, 1510003097000, 1510003117000, 1510003127000, 1510003151000],
    datasets: [
      {
        label: 'dataset 1',
        fill: false,
        backgroundColor: 'rgb(255, 99, 132)',
        data: [72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72, 72]
      },
      {
        label: 'dataset 2',
        fill: false,
        backgroundColor: 'rgb(54, 162, 235)',
        data: [70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70, 70]
      }
    ]
  },
  options: {
    responsive: true,
    legend: {
      onClick: function(e, legendItem) {
        // 先执行默认的图例点击逻辑，切换对应数据集的显示状态
        Chart.defaults.global.legend.onClick.call(this, e, legendItem);
        
        // 检查所有数据集是否都被隐藏
        const allHidden = myChart.data.datasets.every(dataset => dataset.hidden === true);
        
        // 更新Y轴的显示状态
        myChart.options.scales.yAxes[0].display = !allHidden;
        
        // 刷新图表
        myChart.update();
      }
    },
    scales: {
      yAxes: [{
        display: true // 初始状态显示Y轴
      }]
    }
  }
});

关键代码解释 #

• 自定义图例点击事件：我们重写了legend.onClick方法，先调用默认的点击逻辑（保证点击图例能正常切换数据集显示），再进行后续的状态检查。
• 数据集状态检查：使用every方法遍历所有数据集，判断是否每个数据集的hidden属性都为true，以此确认是否全部隐藏。
• 动态更新Y轴：根据检查结果设置Y轴的display属性，然后调用update()方法让图表应用新的配置。

这样，当你点击图例隐藏最后一个数据集时，Y轴会自动消失；当你再次点击图例显示任意一个数据集时，Y轴也会重新出现。

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