Highstock图表中plotLine未正常绘制问题求助

Hey Paulo, I see you've spent a couple hours troubleshooting this—let's get this sorted out quickly!

The issue here is a common gotcha with Highstock's x-axis: by default, the x-axis uses datetime values (timestamps) from your OHLC data, not the array index. When you set value: 100, Highstock is trying to draw a line at the timestamp 100 (which is way back in 1970, hence it's off-screen and invisible), not at the 100th candlestick in your array.

Fix Steps #

1. Grab the timestamp from the 100th entry in your ohlc array (since OHLC data is typically structured as [timestamp, open, high, low, close]).
2. Use that timestamp as the value for your plot line.
3. Add a quick check to make sure your ohlc array has at least 101 entries (indexes start at 0) to avoid errors.

Modified Code #

// 假设我们有300根K线
const symbol = 'APPL';
const volume = [ ... ];
const ohlc = [ ... ];

// 确保数组长度足够，避免索引越界
if (ohlc.length > 100) {
  Highcharts.stockChart('chart', {
      cropThreshold: 500,
      xAxis: {
          plotLines: [{
              color: 'red',
              dashStyle: 'longdashdot',
              // 使用第100根K线的时间戳作为value
              value: ohlc[100][0],
              width: 1,
              zIndex: 5
          }],
      },
      series: [{
          type: 'candlestick',
          id: `${symbol}-ohlc`,
          name: `${symbol} OHLC`,
          data: ohlc,
      }, {
          type: 'column',
          id: `${symbol}-volume`,
          name: `${symbol} Volume`,
          data: volume,
          yAxis: 1,
      }]
  });
} else {
  console.error("OHLC array doesn't have at least 101 entries!");
}

Extra Notes #

If for some reason you did want to use array indexes as your x-axis values (not recommended for time-based candlestick data), you'd need to configure the x-axis to use a linear scale instead of datetime:

xAxis: {
  type: 'linear',
  plotLines: [{ /* ... */ value: 100 }]
}

But this is uncommon for stock charts, since you lose the time context that makes candlestick data meaningful.

内容的提问来源于stack exchange，提问作者Paulo R.