Angular 中的绘图仅呈现第一个接收到的值

Question

我遇到了更新问题。

图表绘制了第一个接收到的值，但是当我向 data[0].x 和 data[0].y 添加更多值时，它们根本没有被绘制出来。我通过 Web 检查器验证我的 data 对象是否正确接收并包含数组。我尝试使用和不使用 ChangeDetectionStrategy（这是我尝试实现它的方式，但没有成功）。

数据-graph.component.ts

import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { formatDate } from '@angular/common';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-data-graph',
  template: '<plotly-plot [data]="data" [layout]="layout"></plotly-plot>',
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class DataGraphComponent implements OnInit {
    constructor(
        private http: HttpClient,
        private _cd: ChangeDetectorRef
    ) {}

    private offset;
    public timeinterval;

    public data = [
        { 
            x: [  ],
            y: [  ], 
            mode: "lines+markers+text",
            text: [  ], 
            textposition: 'bottom',
            yaxis: "y",
            type: "scatter",
        }
    ];

    public layout = {
                autoexpand: "true",
                autosize: "true",
                width: '100%',
                height: 600,
                margin: {
                    autoexpand: "true",
                    margin: 0
                },
                offset: 0,
                hovermode: "closest",
                xaxis: {
                    linecolor: "black",
                    linewidth: 2,
                    mirror: true,
                    automargin: true,
                    type: 'date',
                    tickmode: 'auto'
                },
                yaxis: {
                    linecolor: "black",
                    linewidth: 2,
                    mirror: true,
                    automargin: true
                }
            }
    }

    public update_data(): void {
        this.http.get('/api/data/get/offset/' + this.offset)
            .subscribe(res => {
                this.data[0]['x'].push( formatDate(res['x'], 'yyyy-MM-dd', 'ru') );
                this.data[0]['y'].push( res['y'][0] );
                var new_x = this.data[0].x;
                var new_y = this.data[0].y;

                this.data = [ // try to update the data object to force graph to redraw
                    {
                        x: new_x,
                        y: new_y,
                        text: new_y,
                        mode: "lines+markers+text",
                        textposition: 'bottom',
                        yaxis: "y",
                        type: "scatter"
                    }]

                this._cd.detectChanges();
                this.offset = this.offset + 1;
            });
    }

    ngOnInit() {
        this.offset = 0;
        this.timeinterval = 1000;

        setInterval(() => {
            this.update_data();
        }, this.timeinterval);
    }

GET 请求 /api/data/get/offset/0 returns:

{
  "x": [
    "Fri, 03 Jan 2020 00:00:00 GMT"
  ], 
  "y": [
    "259.0000000"
  ]
}

同样，GET请求到/api/data/get/offset/1 returns:

{
  "x": [
    "Mon, 06 Jan 2020 00:00:00 GMT"
  ], 
  "y": [
    "256.5500000"
  ]
}

等等。

页面加载时，图表上没有任何内容。 OnInit 后 1 秒，图形看起来像这样并且之后没有改变：

Answer 1

我发现 a bug 具有完全相同的行为。我使用 angular-plotly.js@3.0.0，但似乎此版本中仍然存在错误。

我的解决方案是使用纯 plotly.js。我将代码更改如下：

import { Component, OnInit } from '@angular/core';
import { formatDate } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import * as Plotly from 'plotly.js/dist/plotly.js';
import { Config, Data, Layout } from 'plotly.js/dist/plotly.js';

@Component({
  selector: 'app-data-graph',
  template: '<div id="pagegraph" #pagegraph></div>'
})

export class DataGraphComponent implements OnInit {
    constructor(
        private http: HttpClient
    ) {}

    private offset;
    public timeinterval;

    public graph = {
        data: [{ 
            x: [ ], 
            y: [ ], 
            text: [ ], 
            type: 'lines+markers+text' 
        }],
        layout: {
            // here goes layout section 
        }
    };

    public update_data(): void {
        this.http.get('/api/data/get/offset/' + this.offset)
            .subscribe(res => {
                this.graph.data[0].x.push(formatDate(res['x'][0], 'yyyy-MM-dd', 'ru'));
                this.graph.data[0].y.push(res['y'][0]);
                this.graph.data[0].text.push(res['y'][0]);
                Plotly.update('pagegraph', this.graph.data, this.graph.layout); // <-- updated plot
                this.offset = this.offset + 1;
            });
    }

    ngOnInit() {
        this.offset = 0;
        this.timeinterval = 1000;

        Plotly.newPlot('pagegraph', this.graph.data, this.graph.layout); // <-- initial plot

        setInterval(() => {
            this.update_data();
        }, this.timeinterval);
    }

Angular 中的绘图仅呈现第一个接收到的值

Plotly graph in Angular renders only first received value

angular

plotly

updating