ApexCharts点击图例时如何判断对应系列是否处于隐藏状态

核心原理 #

ApexCharts 实例的全局状态中内置了seriesHidden数组，专门存储所有系列的显隐状态，数组下标和你配置的series顺序一一对应，值为true代表对应系列已隐藏，false代表处于展示状态，且该值会在图例点击事件触发前完成更新，你可以直接在事件回调中读取判断。

具体实现代码 #

// 提前存储初始注释配置，恢复时直接复用
const originAnnotations = {
  xaxis: [/* 你原来的x轴注释配置 */],
  yaxis: [/* 你原来的y轴注释配置 */]
}

let chart;
const options = {
  chart: {
    type: 'bar',
    stacked: true,
    events: {
      legendClick: (event, chartContext, config) => {
        // 获取所有系列最新的显隐状态
        const seriesHiddenList = chartContext.w.globals.seriesHidden;
        // 判断是否所有系列都处于展示状态
        const allSeriesVisible = seriesHiddenList.every(status => !status);

        // 更新注释显隐
        chart.updateOptions({
          annotations: allSeriesVisible ? originAnnotations : {}
        })
      }
    }
  },
  series: [/* 你的系列配置 */],
  annotations: originAnnotations,
  // 其他配置项如xaxis、yaxis等
}

// 初始化渲染图表
chart = new ApexCharts(document.querySelector('#your-chart-container'), options);
chart.render();

单独判断指定系列显隐的方法 #

如果你需要判断某一个特定系列的状态，直接取seriesHidden数组对应下标的值即可：

// 比如判断索引为2的系列是否隐藏
const targetSeriesHidden = chartContext.w.globals.seriesHidden[2];
if (targetSeriesHidden) {
  // 对应系列已隐藏的逻辑
}

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