Highcharts面积范围图：自定义渲染函数中获取plotLow与plotHigh的规范方法咨询

你好呀！我仔细看了你的问题和代码，确实在Highcharts里搞自定义渲染的时候，经常会碰到这种「好用但没文档」的内部属性，挺闹心的😅

首先得跟你说清楚：plotLow和plotHigh确实是Highcharts内部计算时生成的属性，用来存储面积范围图数据点高低值对应的轴坐标数值，但它们属于内部实现细节，所以没被加到公开文档和TypeScript类型定义里。虽然当前版本用着没问题，但这里有个隐患——如果Highcharts后续版本重构内部逻辑，这些未公开的属性可能会被改名或者移除，到时候你的代码就会出问题。

那有没有官方文档里明确推荐的「正确姿势」呢？当然有！我们可以用Highcharts提供的公开API来实现同样的效果，完全不用依赖内部属性，而且TypeScript也不会报错。

核心思路是用轴对象的toPixels方法，把数据点的原始low和high值转换成像素坐标，再结合公开的point.plotX获取x轴像素位置。给你调整一下原来的代码示例，改成规范的写法：

render() {
  const chart = this;
  const point = chart.series[0].points[3];
  const rectWidth = 8;
  const yAxis = chart.series[0].yAxis;
  
  // 用公开API获取坐标
  const x = point.plotX;
  // 把high值转成y轴像素坐标，第二个参数true表示相对于绘图区
  const highY = yAxis.toPixels(point.high, true);
  // 把low值转成y轴像素坐标
  const lowY = yAxis.toPixels(point.low, true);
  
  if (!chart.customSVG) {
    chart.customSVG = chart.renderer
      .rect()
      .attr({ fill: "#008d80" })
      .add();
  }
  
  chart.customSVG.attr({
    x: x - (rectWidth / 2),
    y: highY,
    width: rectWidth,
    height: lowY - highY,
  });
}

至于你问的「要不要更新文档和TS定义」——其实Highcharts官方的原则是，只有那些承诺长期兼容、专门给外部开发者设计的API才会加到公开文档里。内部属性是为了支撑框架自身逻辑存在的，随时可能变动，所以一般不会把它们纳入公开规范。

所以更建议你改用上面的公开API写法，这样代码更健壮，也符合官方的设计规范，不用担心版本更新带来的兼容问题。

内容来源于stack exchange