Highcharts将单行添加到柱形图

Question

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

• 图表宽度是可变的，因此该行必须是＆＃34;响应＆＃34;
• 行应仅覆盖目标期间的两个系列中的一个
• 线宽应略宽于柱本身

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

1. Highcharts渲染器：我相信我可以使用渲染器来获取数据值并轻松渲染位置，绘制形状也不是什么大问题。但是，我不相信我会拥有＆＃34; resposive＆＃34;行为，例如，线条最初将被绘制，但如果用户加宽屏幕，线条将保持放置，而图表的其余部分宽度增加（查看渲染器的输出，我看不到任何我可以用resize事件链接起来的元素，即使这样，数学也不会那么理想。）
2. HTML绝对叠加并使用窗口调整大小事件重新定位。这里的缺点是获得所需的数据点值/转换位置，并在调整大小事件期间保持这些比率。
3. 具有单个值的第三个系列。我在这里预见的问题是格式化系列，使其位于目标列的顶部（我不知道＆＃34;单行＆＃34;我可以使用的类型系列）。我倾向于认为这是理想的，就好像我可以正确配置格式，它是高级图表的责任来呈现它，所以它更多＆＃34;在上下文＆＃34;与图表的其余部分。不幸的是，我不确定我是否有足够的系列类型和格式选项来生成所需的显示。而且，而不是＆＃34;单行＆＃34;渲染类型的系列，我认为可能会破坏底部列透明的堆叠列，但其他格式问题（例如定位在现有系列列的顶部）仍然存在。

以前是否有人必须做这样的事情，并能提供一些有关如何完成的见解？感谢。

Answer 1

绘制自定义行是我猜的最干净的解决方案 - 您可以通过挂钩重绘事件并重新定位/调整大小来轻松响应该行。

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

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]
  ]
}]

示例：http://jsfiddle.net/g6fjjach/