Highcharts 向柱形图添加单线

Question

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

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

我已经考虑了三种方法来做到这一点，但不确定最佳路线：

1. Highcharts 渲染器：我相信我可以使用渲染器并相当容易地访问数据值和渲染位置，并且绘制形状不会有什么大不了的。但是，我不相信我会有“响应式”行为，例如，最初会绘制线条，但如果用户扩大屏幕，线条将保持不变，而图表的其余部分宽度会增加（查看渲染器的输出，我看不到任何可以与调整大小事件相关联的元素，即使如此，当时的数学计算也不太理想）。
2. HTML 绝对覆盖并使用窗口调整大小事件重新定位。这里的缺点是在调整大小事件期间转换所需的数据点值/位置并保持这些比率。
3. 具有单个值的第三个系列。我在这里预见到的问题是格式化系列，使其位于目标列的顶部（我不知道可以用于此的“单行”类型系列）。我倾向于认为这将是理想的，就好像我可以正确配置格式一样，渲染它是 highcharts 的责任，所以它与图表的其余部分更“在上下文中”。不幸的是，我不确定我是否有足够的系列类型和格式选项来生成所需的显示。此外，我认为不是“单行”渲染类型的系列，而是可能破解底部列透明的堆叠列，但其他格式问题（例如定位在现有系列列的顶部）仍然存在。李>

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

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/