使用套接字时，实时数据中的 amChart 中的“图表未处理”

Question

amChart“图表未处理”警告有类似问题，导致内存泄漏。

对于解决方案，我经历了这个 https://www.amcharts.com/docs/v4/tutorials/chart-was-not-disposed/

但是当我使用套接字更新图表（实时图表）时，我没有静态数据。我正在使用数据库中的套接字将动态数据推送到 amChart 中。我无法使用不适用于我的代码的chart.dispose()，老实说，我不确定我是否以正确的方式使用chart.dispose()。

因为我已经在我的角度服务中实现了 amChart 代码，如下所示。

在我的角度服务中。

init( currentChart, productChart, gaugeChart, legend ) {
    this.getConfig( currentChart, productChart, gaugeChart, legend );
    this.getConfigMeag();
    this._today = this.datePipe.transform( this._today, 'yyyy-MM-dd HH:mm:ss' );
    this._todate = this.datePipe.transform( this._today, 'yyyy-MM-dd' );
    let socket = io.connect( DatabaseUtility.extractIpFromAddressBar );
    socket.on( 'socketUpdate', ( data ) => {
        this._today = Date.now();
        this._today = this.datePipe.transform( this._today, 'yyyy-MM-dd HH:mm:ss' );
        this._todate = this.datePipe.transform( this._today, 'yyyy-MM-dd' );
        this.getCurrentData( this._today, productChart, gaugeChart, legend );
        this.getCurrentYieldData( this._todate, currentChart);
    } );
}



liveChart( alarmCheck, warningCheck, currentChart ) {
    if ( !this._liveChart) {
        return;
    }

    if(this._chart){
        this._chart.dispose();  //When I added here still I'm getting the "Chart was not disposed" warning
    }

    this._chart = am4core.create( currentChart.nativeElement, am4charts.XYChart );
    this._chart.cursor = new am4charts.XYCursor();
    this._chart.data = this._liveChart;
    if(this._chart){
        this._chart.dispose(); //When I added here it shows "Error: EventDispatcher is disposed"
    }
    this._chart.legend = new am4charts.Legend();
    this._chart.legend.labels.template.text = "Current Yield";

    // Create axes
    let dateAxis = this._chart.xAxes.push( new am4charts.DateAxis() as any );
    dateAxis.dataFields.category = "Date";
    dateAxis.renderer.grid.template.location = 0;
    dateAxis.renderer.minGridDistance = 40;
    dateAxis.renderer.labels.template.location = 0.0001;
    dateAxis.dateFormatter.inputDateFormat = "YYYY-MM-DD, HH:mm";
    dateAxis.dateFormats.setKey( "minute", "HH:mm" );
    dateAxis.baseInterval = {
        "timeUnit": "minute",
        "count": this._configValues.cycleTime
    };

    dateAxis.renderer.line.strokeOpacity = 1;
    dateAxis.renderer.line.strokeWidth = 1;
    dateAxis.renderer.line.stroke = am4core.color( "#3787ac" );

    let valueAxis = this._chart.yAxes.push( new am4charts.ValueAxis() as any );
    valueAxis.autoGridCount = false;
    valueAxis.max = 110;
    valueAxis.min = 0;
    valueAxis.title.text = "(%)";
    valueAxis.title.align = "center";
    valueAxis.title.fontWeight = 400;
    valueAxis.unit = "%";
    valueAxis.unitPosition = "right";

    valueAxis.renderer.line.strokeOpacity = 1;
    valueAxis.renderer.line.strokeWidth = 1;
    valueAxis.renderer.line.stroke = am4core.color( "#3787ac" );

    valueAxis.renderer.ticks.template.disabled = false;
    valueAxis.renderer.ticks.template.strokeOpacity = 1;
    valueAxis.renderer.ticks.template.stroke = am4core.color( "#495C43" );
    valueAxis.renderer.ticks.template.strokeWidth = 2;
    valueAxis.renderer.ticks.template.length = 10;

    if ( warningCheck ) {
        let range = valueAxis.axisRanges.create();
        range.value = this._warningUpperLimit;
        range.grid.stroke = am4core.color( "#cc3300" );
        range.grid.strokeWidth = 2;
        range.grid.strokeOpacity = 1;
        range.label.inside = true;
        range.label.text = "Warning Upper Limit";
        range.label.fill = range.grid.stroke;
        range.label.verticalCenter = "bottom";

        let range2 = valueAxis.axisRanges.create();
        range2.value = this._warningLowerLimit;
        range2.grid.stroke = am4core.color( "#cc3300" );
        range2.grid.strokeWidth = 2;
        range2.grid.strokeOpacity = 1;
        range2.label.inside = true;
        range2.label.text = "Warning Lower Limit";
        range2.label.fill = range2.grid.stroke;
        range2.label.verticalCenter = "bottom";
    }

    if ( alarmCheck ) {
        let range3 = valueAxis.axisRanges.create();
        range3.value = this._alarmUpperLimit;
        range3.grid.stroke = am4core.color( "#A96478" );
        range3.grid.strokeWidth = 2;
        range3.grid.strokeOpacity = 1;
        range3.label.inside = true;
        range3.label.text = "Alarm Upper Limit";
        range3.label.fill = range3.grid.stroke;
        range3.label.verticalCenter = "bottom";

        let range4 = valueAxis.axisRanges.create();
        range4.value = this._alarmLowerLimit;
        range4.grid.stroke = am4core.color( "#A96478" );
        range4.grid.strokeWidth = 2;
        range4.grid.strokeOpacity = 1;
        range4.label.inside = true;
        range4.label.text = "Alarm Lower Limit";
        range4.label.fill = range4.grid.stroke;
        range4.label.verticalCenter = "bottom";
    }

    // Create series
    let series = this._chart.series.push( new am4charts.LineSeries() as any );
    series.tooltipText = "{date}\n[bold font-size: 17px]Value: {valueY}[/]";
    series.dataFields.valueY = "value";
    series.dataFields.dateX = "date";
    series.tensionX = 0.8;
    series.strokeWidth = 3;
    series.strokeOpacity = 5;

    let bullet = series.bullets.push( new am4charts.CircleBullet() );
    bullet.strokeWidth = 2;
    bullet.stroke = am4core.color( "#000" );
    bullet.setStateOnChildren = true;
    bullet.propertyFields.fillOpacity = "opacity";
    bullet.propertyFields.strokeOpacity = "opacity";

    let hoverState = bullet.states.create( "hover" );
    hoverState.properties.scale = 1.7;

    /* Create a cursor */
    this._chart.cursor = new am4charts.XYCursor();
}

在我的角度组件中

 ngAfterViewInit() {
    this.zone.runOutsideAngular( () => {
        this._service.init( this.currentChart, this.productChart, this.gaugeChart, this.legend );
    } );

}

ngOnDestroy() : void {
    this.zone.runOutsideAngular( () => {
        if ( this._service.chart ) {
            this._service.chart.dispose();
        }
    } );
}

HTML

 <div class="tile__content">
        <div [style.width.%]="100" [style.height.px]="480" #currentChart></div>
    </div>

如果我使用am4core.disposeAllCharts()，我将看不到任何图表。

dispose 和 chartdata 哪个位置合适？

Answer 1

我不知道 Angular，但在 Vue.js 中我必须处理图表并在 tick 中再次创建它。所以我做了这样的事情：

    loadChart(){
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }

      this.chartIsLoading = true;

      // other preparation code here

      // clear and then new loading on the next tick is needed for the disposing to finish.
    
      this.$nextTick(() => {
        this.loadJsonCharts();
      });
    },

这是一个关于 Angular 中刻度线的帖子：When and why to use a 'tick' in Angular 2?

希望对你有帮助！