Question

我使用高图来渲染图形，并使用渲染器在图表中绘制自定义线条。我想要在数据发生变化时重新计算并重新绘制此路径。我正在使用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。感谢

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

当我更改数据时，渲染器绘制的线条需要被移除，但它仍然保留，图形重新绘制不同的数据点。如下图所示

我想摆脱这些线并重新绘制它们。

Answer 1

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

Highcharts.chart('container', {
  chart: {
    events: {
      render: function() {
        const points = [{
            x: 0.1,
            y: 0.1
          },
          {
            x: 0.2,
            y: 0.4
          },
          {
            x: 0.3,
            y: 0.9
          }
        ];
        const path = [];
        for (let i = 0; i < points.length; i++) {
          i === 0 ? path.push("M") : path.push("L");
          path.push(this.xAxis[0].toPixels(points[i].x));
          path.push(this.yAxis[0].toPixels(points[i].y));
        }
         if (this.customPath) {
          this.customPath.destroy()
          this.customPath = undefined
        }
        this.customPath = this.renderer.g('customPath').add()
        
        this.renderer.path(path)
          .attr({
            stroke: 'green',
            'stroke-width': 1,
            zIndex: 1
          })
          .add(this.customPath);
      }
    }
  },
  xAxis: {
    lineWidth: 1,
    min: 0,
    max: 1,
    minorTicks: true
  },

  yAxis: {
    lineWidth: 1,
    min: 0,
    max: 1,
    minorTicks: true
  },

  legend: {
    enabled: true
  },

  series: [{ id: "dummy" }]

});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

JSFiddle link

Highcharts SVG元素未更新。在Highchats中定制自由形态绘图？

1 个答案: