我有一个高股价图,它提取了一些OHLC数据,并创建了一个包含3个系列的图表- 1个阴阳烛、1个成交量和1组标志。这一切都工作正常。
我想在图表中添加一些自定义趋势线。我将根据自定义逻辑确定点并绘制路径。
问题是当我使用图表中的Renderer
来绘制路径时,路径没有连接到基础图表。当图表日期范围被修改和/或新点被添加到主series
时,我的自定义路径的位置和大小保持不变。它是恒定的。
我需要自定义路径的位置/端点绑定到图表的数据点,而不是SVG绘图的坐标。有没有办法做到这一点?
下面是添加从pointa
到pointb
的简单路径的代码部分。该路径按预期呈现,但随后是静态的:
buildPath: function(pointa, pointb){
this.myChart.renderer.path(this.buildPathArray(pointa,pointb))
.attr({
'stroke-width': 2,
stroke: 'red'
}).add();
},
buildPathArray: function(pointa, pointb){
var pathArray = [];
pathArray.push('M');
pathArray.push(pointa.plotX);
pathArray.push(pointa.plotClose);
pathArray.push('L');
pathArray.push(pointb.plotX);
pathArray.push(pointb.plotClose);
pathArray.push('Z');
return pathArray;
}
根据请求,我创建了a JS Fiddle that demonstrates the general issue.
任何帮助都是非常感谢的。
1条答案
按热度按时间plupiseo1#
已解决
Highcharts似乎并不是免费的,如果是免费的话,我也不知道它的技巧。
我必须同时使用
StockChart
中包含的chart
对象的load
和redraw
事件。在
load
上,我绘制了初始路径,与趋势线中涉及的Point
对象对齐。当我构建这些path
对象(SVGElement
对象包含真正的SVGpath
元素)时,我在一个数组中跟踪它们。在
redraw
上,我必须破坏旧的趋势线并创建新的趋势线,所以我循环遍历旧元素数组,并将每个元素从它们各自的parentNode
中删除,然后根据每个相关Point
对象新绘制的位置绘制新的趋势线。最终的结果是,在每个
redraw
事件中,这些线看起来是随着图表移动的,而实际上它们是被破坏和重新创建的。