Apex Charts同步图表：如何禁用缺失值处的X轴十字准线？

针对同步图表里X轴对应位置所有数据均为null时仍显示十字准线的问题，可通过监听鼠标移动事件，动态判断当前位置是否存在有效数据，进而控制十字准线的显示状态，同时兼容图例切换场景。

实现步骤： #

1. 初始化时隐藏十字准线
   在X轴配置中默认隐藏crosshair，后续根据数据状态动态切换：

xaxis: {
  crosshair: {
    show: false
  }
}

2. 添加鼠标移动事件监听
   通过chart.events.mousemove事件，获取当前鼠标对应的X轴索引，遍历所有可见系列的数据，判断是否存在非null值，再更新crosshair的显示状态：

chart: {
  events: {
    mousemove: function(event, chartCtx, config) {
      if (!config.globals.xaxis) return;
      const xIndex = config.globals.xaxis.selectedPointIndex;
      let hasValidData = false;

      // 仅检查当前可见的系列数据
      chartCtx.w.config.series.forEach(series => {
        const isSeriesVisible = chartCtx.series[series.name]?.visible !== false;
        const pointValue = series.data[xIndex];
        if (isSeriesVisible && pointValue !== null && pointValue !== undefined) {
          hasValidData = true;
        }
      });

      // 动态更新十字准线显示状态
      chartCtx.updateOptions({
        xaxis: {
          crosshair: {
            show: hasValidData
          }
        }
      }, false, false);
    }
  }
}

关键说明： #

• 遍历数据时仅检查当前可见的系列，确保图例切换后逻辑依然准确；
• 使用updateOptions的后两个参数设为false，避免触发图表重绘动画，提升交互流畅度；
• 若使用同步图表（多图表联动），需在每个图表实例中添加相同的事件监听逻辑，保证联动时十字准线状态一致。

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