HighChart - 未链接到图表的自定义路径答案

【问题标题】：HighChart - Custom Paths Not Linked to ChartHighChart - 未链接到图表的自定义路径
【发布时间】：2012-12-12 05:10:03
【问题描述】：

我有一个 HighStock 图表，它正在提取一些 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.

非常感谢任何帮助。

【问题讨论】：

不是很清楚，能不能乱动一下？
我用 jsfiddle 链接更新了原始 Q。希望这会有所帮助。

标签： highcharts highstock

【解决方案1】：

已解决

Highcharts 似乎并不是免费提供的。或者如果是这样，我没有找到技术。

我必须同时使用StockChart 中包含的chart 对象的load 和redraw 事件。

在load 上，我绘制了初始路径，与我的趋势线中涉及的Point 对象对齐。当我构建这些 path 对象（SVGElement 包含真正的 SVG path 元素的对象）时，我会在一个数组中跟踪它们。

在redraw，我既要摧毁旧的趋势线，又要创造新的趋势线。所以我循环遍历我的旧元素数组并从它们自己的parentNode 中删除每个元素。然后，我根据每个相关Point 对象的新绘制位置绘制新版本的趋势线。

最终结果是，在每个redraw 事件中，线条似乎会随着图表移动，而实际上它们正在被销毁和重新创建。

【讨论】：