Highcharts SVG元素未更新。 Highchats中的自定义自由图形？

Question

我正在使用highchart来绘制图形，也正在使用渲染器以在图表内绘制自定义线。我希望每当有数据更改时都重新计算并重新绘制此路径。我正在使用highcharts-ng和angular。该代码在下面提到：-

{
            options: {
                chart: {
                    type: 'line',
                    marginTop: 80,
                    style: {
                        fontFamily: 'serif',
                        fontSize:14
                    },
                    events:{
                        redraw:function(e){
                            console.log(e)
                            var elem=e.target.renderer.Element()
                            console.log(elem)
                            console.log('I am Reloaded')
                        }
                    }
                    //backgroundColor:'rgba(255, 255, 255, 0.1)'
                },
                exporting: {
                    enabled: false
                },
                plotOptions: {
                    series: {
                        animation: false,
                        marker: {
                            symbol: 'circle'
                        },
                        lineWidth: 1,
                        events: {
                            afterAnimate: function () {
                                console.log('lol')
                            }
                        }
                    }
                },
                colors: ['#2C91DE', '#165A8E'],
            },
            tooltip: {
                style: {
                    padding: 10,
                    fontWeight: 'bold'
                }
            },
            title: {
                text: ""
            },
            loading: false,
            series: [],
            func: (chart) => {
                this.$timeout(() => {
                    console.log(chart)
                    var ren = chart.renderer;
                    var group = ren.g().add();
                    var attrForVLine = {
                        'stroke-width': 3,
                        stroke: '#2C91DE',
                        dashstyle: 'solid'
                    };

                    for (var i = 0; i < chart.series[0].data.length; i++) {
                        var plot1 = chart.series[0].data[i];
                        var plot2 = chart.series[1].data[i];

                        /**
                         * Creating line segments across the graphs.
                         * Keeping the ZIndex low for these lines.
                         */
                        ren.path([
                            'M',
                            plot1.plotX + chart.plotLeft,
                            plot1.plotY + chart.plotTop,
                            'V',
                            plot2.plotY + chart.plotTop
                        ]).attr(attrForVLine).add();
                    }
                }, 1000);
            },
            yAxis: {
                tickInterval: 40,
                title: {
                    text: ''
                }
            },
            xAxis: {
                startOnTick: true,
                endOnTick: true,
                lineColor: '#000000',
                type: 'datetime',
                labels: {
                    rotation: -60,
                    format: '{value:%m-%d-%Y}',
                    align: 'right'
                }
            }
        };

无论何时呈现此图表，它也会呈现一条路径。但是，如果数据更改，则路径不会更改，而是保持不变。请帮忙。我想更新动态呈现的SVG。谢谢

下面提到的图表具有渲染器绘制的垂直线

当我更改数据时，需要删除渲染器绘制的线条，但它仍然存在，并且使用不同的数据点重新绘制图形。如下所示

我想摆脱这些线条并重画它们。

我正在使用highchart来绘制图形，也正在使用渲染器以在图表内绘制自定义线。我希望每当有数据更改时都重新计算并重新绘制此路径...。

Answer 1

可能已经晚了，但是这些SVG被实现为图表SVG顶部的叠加SVG。因此，当图表更改时，它们不会更改，因为它们是独立的。您必须手动删除以前的SVG，然后再次绘制它们。您可以收听图表的“ render”事件，然后调用一个函数来重绘SVG。看下面的例子：