Javascript Highcharts将单行添加到柱形图

我正在使用Highcharts，并且有一个基本的双系列柱状图。我想在图表中添加一条数据驱动的线，如下图中的红色框所示，但我不确定最佳方法（这将在当月记录预计的月末值）

• 图表宽度是可变的，因此线条需要“响应”
• 该行应仅覆盖目标期间两个系列中的一个
• 线条宽度应略宽于列本身的宽度

我考虑过三种方法，但不确定最佳路线：

Highcharts渲染器：我相信我可以使用渲染器，并且可以相当轻松地访问数据值和渲染位置，绘制形状也不是什么大问题。但是，我不相信我会有“响应”行为，例如，最初会画线，但是如果用户加宽屏幕，当图表的其余部分宽度增加时，线将保持不变（查看渲染器的输出，我看不到任何可以与调整大小事件链接的元素，即使如此，在这一点上，数学也不太理想）

HTML绝对覆盖和重新定位与窗口调整大小事件。这里的缺点是获得所需的数据点值/位置转换，并在调整大小事件期间保持这些比率

具有单个值的第三个系列。我在这里预见的问题是设置系列的格式，使其位于目标列的顶部（我不知道有哪一个“单行”类型的系列可以用于此）。我倾向于认为这将是理想的，因为如果我可以正确配置格式，则highcharts有责任呈现它，因此它与图表的其余部分更为“关联”。不幸的是，我不确定我是否有足够的系列类型和格式选项来生成所需的显示。此外，而不是“单行”对于渲染类型的系列，我考虑过可能对底部列透明的堆叠列进行黑客攻击，但其他格式问题（例如定位在现有系列列的顶部）仍然存在

---

以前是否有人做过类似的事情，并且能够提供一些关于如何完成的见解？谢谢。

我想绘制自定义线条是最干净的解决方案-通过连接到重画事件并重新定位/调整大小，您可以使该线条轻松响应

系列方法不需要大量编码，只需设置几个选项。您可以使用带有自定义标记符号的分散类型

Highcharts.SVGRenderer.prototype.symbols.line = function(x, y, w, h) {
  return ['M', x, y, 'L', x + w, y];
};

{
  type: 'scatter',
  showInLegend: false,
  enableMouseTracking: false,
  marker: {
    symbol: 'line',
    lineColor: 'orange',
    lineWidth: 6,
    radius: 20
  },
  data: [
    [1.15, 140]
  ]
}]

---

示例：

我想，绘制自定义线条是最干净的解决方案-您可以通过挂接到重画事件并重新定位/调整大小，使该线条轻松响应

系列方法不需要大量编码，只需设置几个选项。您可以使用带有自定义标记符号的分散类型

Highcharts.SVGRenderer.prototype.symbols.line = function(x, y, w, h) {
  return ['M', x, y, 'L', x + w, y];
};

{
  type: 'scatter',
  showInLegend: false,
  enableMouseTracking: false,
  marker: {
    symbol: 'line',
    lineColor: 'orange',
    lineWidth: 6,
    radius: 20
  },
  data: [
    [1.15, 140]
  ]
}]

---

示例：

是的，我一直在为子弹图做这件事，使用与下面@morganfree的答案相同的方法。示例：|@jlbigs很好的小提琴，谢谢链接。我一直在为子弹图做这件事，使用与下面@morganfree的答案相同的方法。示例：|@jlbigs很好的小提琴，谢谢链接我我们建议更改是使用

行

系列而不是

分散

系列，然后将

线宽

设置为

0

。区别在于

行

系列与共享的

工具提示

很好地配合，而

分散

系列则不行。我建议更改的一点是使用

行

series而不是

scatter

series，然后将

lineWidth

设置为

0

。区别在于

line

series与共享的

工具提示

s配合良好，而

scatter

series则不能。