如何在ApexCharts蜡烛图中无需悬停始终在最后序列显示十字准线

不需要修改框架源码，直接用ApexCharts内置API就能实现无鼠标悬停时十字准线默认固定在序列末尾的效果。

第一步：初始化基础配置 #

先确保十字准线、tooltip相关配置处于启用状态：

const chartOptions = {
  chart: {
    type: 'candlestick',
    height: 450,
    // 其余你的业务自定义配置
  },
  xaxis: {
    type: 'datetime',
    crosshair: {
      show: true, // 开启X轴十字准线
      width: 1,
      stroke: {
        color: '#888',
        dashArray: 3
      }
    }
  },
  yaxis: {
    crosshair: {
      show: true // 需要Y轴十字准线则开启，不需要设为false
    }
  },
  tooltip: {
    enabled: true, // 必须开启，十字准线和提示框联动依赖该配置
    shared: true
  },
  series: [{
    name: 'K线',
    data: yourKlineData // 你自己的K线数据源
  }]
}

第二步：渲染完成后主动定位十字准线 #

图表渲染完成后，调用内置setCrosshair方法，传入最后一个数据点的X坐标值，即可直接把十字准线固定在序列末尾，不需要触发鼠标悬停。如果需要同步显示最后一个点的tooltip，搭配showTooltip方法使用即可：

const chart = new ApexCharts(document.querySelector("#chart"), chartOptions);

// 封装定位到最后一个点的公共方法，方便后续复用
const setCrosshairToLastPoint = () => {
  const allXPoints = chart.w.globals.seriesX[0];
  const lastPointX = allXPoints[allXPoints.length - 1];
  chart.setCrosshair(lastPointX);
  chart.showTooltip({ x: lastPointX });
}

chart.render().then(() => {
  setCrosshairToLastPoint();
})

第三步：适配动态更新/交互场景 #

• 如果是实时K线场景，每次调用updateSeries更新完数据后，重新执行一次定位方法即可：

chart.updateSeries([{ data: newKlineData }]).then(() => {
  setCrosshairToLastPoint();
})

• 如果需要锁死十字准线始终在最后一个点、不跟随鼠标移动，可以在鼠标移出图表区域时重置定位：

chart.container.addEventListener('mouseleave', () => {
  setCrosshairToLastPoint();
})

实现后的效果和预期一致：

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