高图将单线添加到柱形图

debugcn 发表于 Dev

耶利奇

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

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

我已经考虑了三种方法来执行此操作，但不确定最佳方法：

Highcharts渲染器：我相信我可以使用渲染器并相当容易地访问数据值和渲染位置，并且绘制形状不会有什么大不了的。但是，我不相信我会具有“重复性”的行为，例如，最初会画线，但是如果用户加宽屏幕，则该线将保持原样，而图表的其余宽度增加（请参见在渲染器的输出中，我看不到任何可以与resize事件链接的元素，即使那样，此时的数学计算也不尽人意。
HTML绝对覆盖和重新定位以及窗口调整大小事件。不利的一面是在转换大小事件期间获取所需的数据点值/位置并进行转换，并保持这些比率。
具有单个值的第三个系列。我在这里看到的问题是格式化序列，使其位于目标列的顶部（我不知道我可以使用“单行”类型的序列）。我倾向于认为这将是理想的，好像我可以正确配置格式一样，呈现高图表是它的责任，因此它与图表的其余部分更加“关联”。不幸的是，我不确定我是否具有足以产生所需显示的系列类型和格式选项。另外，我考虑的不是序列化的“单行”渲染类型，而是考虑使底部的列透明的堆叠的列被黑客入侵，但其他格式设置问题（例如定位在现有序列列的顶部）仍然存在。

有没有人曾经做过这样的事情，并且可以提供一些有关如何实现的见解？谢谢。

摩根自由

我猜画一条自定义线条是最干净的解决方案-您可以通过挂接到redraw事件并重新定位/调整大小来使该线条易于响应。

串联方法不需要很多编码，只需设置一些选项即可。您可以将散点类型与自定义标记符号一起使用。

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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。