HighCharts StockChart（烛台 + 柱状范围）叠加层在不同的缩放级别上无法正确显示

问：

我在 HighCharts 中将 columnrange 覆盖在股票图表上时遇到了具体问题。我正在尝试创建一个热图叠加层，其中包含限价订单金额主要聚合的水平。我想实现的一个例子是：

热图图表示例

到目前为止，我发现我可以在股票图表上覆盖列范围，以绘制这些区域。不幸的是，有一个错误，或者我在这里做错了什么......这是我想出的：

https://jsfiddle.net/xnappp/1m30xb2v/

var candle_series = []
const xhr = new XMLHttpRequest();
xhr.open('GET', "https://localhost/api/ohlc", false);
try {
  xhr.send();
  if (xhr.status === 200) {
    candle_series = JSON.parse(xhr.responseText);
  } else {
    console.error(`HTTP error! Status: ${xhr.status}`);
  }
} catch (error) {
  console.error('Request error:', error);
}

var color_series = []
const xhr_color = new XMLHttpRequest();
xhr_color.open('GET', "https://localhost/api/walls", false);
try {
  xhr_color.send();
  if (xhr_color.status === 200) {
    color_series = JSON.parse(xhr_color.responseText);
  } else {
    console.error(`HTTP error! Status: ${xhr_color.status}`);
  }
} catch (error) {
  console.error('Request error:', error);
}
console.log(color_series)

Highcharts.stockChart('container', {
  chart: {
    height: '650px'
  },
  series: [{
    id: 'btc',
    name: 'BTC Price',
    type: 'candlestick',
    data: candle_series,
    zIndex: 1
  }, {
    type: 'columnrange',
    name: 'Amount',
    linkedTo: 'btc',
    animation: false,
    findNearestPointBy: 'y',
    cropThreshold: 0,
    pointInterval: 0,
    grouping: false,
    groupPadding: 0,
    data: color_series,
    zIndex: 0
  }],
  plotOptions: {
    series: {
        "turboThreshold": 0
    }
  },
  rangeSelector : {
    enabled: false
  },
  navigator: {
    enabled: false
  }
});

目前图表如下所示：默认图表已损坏

但是当你放大时，关卡开始按应有的方式显示。请参阅同一图形的示例，但已放大：放大的图形正常工作的示例

基本上整个事情有点工作，但是当股票图表开始“聚合”数据时，就会中断，并且只是破坏了整个事情。

任何关于我在这里错过什么的提示都会很棒。提前感谢大家！