如何在Highcharts中于X轴左侧添加绘图线？

问题说明 #

我给图表X轴添加的绘图线默认在0位置，会穿过第一组数据点。我想把这条线移到所有数据的左侧，但调用this.xAxis[0].addPlotLine({value: -10})时，因为该函数不支持负值，最终效果和设置value: 0完全一致。

可行解决方案 #

方案1：调整X轴最小值范围

先获取X轴数据的最小值，手动把X轴的min设为比这个最小值更小的数值，让负值的value能生效，绘图线就会显示在数据左侧：

// 获取当前系列X轴数据的最小值
const xMin = Math.min(...this.series[0].xData);
// 更新X轴最小值，留出左侧空间
this.xAxis[0].update({
  min: xMin - 10
});
// 添加绘图线到数据左侧的位置
this.xAxis[0].addPlotLine({
  value: xMin - 5,
  color: '#000',
  width: 2,
  id: 'left-plot-line'
});

方案2：用Renderer直接绘制线条

如果不想改动轴的范围，可借助Highcharts的renderer直接在图表容器里绘制线条，不受轴的数值限制：

const chart = this;
const { plotLeft, plotTop, plotHeight } = chart;

// 绘制垂直于数据左侧的线条
chart.renderer.path(['M', plotLeft - 12, plotTop, 'L', plotLeft - 12, plotTop + plotHeight])
  .attr({
    'stroke-width': 2,
    stroke: '#000'
  })
  .add();

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