Question

我使用角度4.3.6与打字稿2.4.2。我正在从套接字读取一些数据，并且我试图将它们添加到数据提供者。

基于这个例子：

https://www.amcharts.com/kbase/optimizing-multi-chart-periodically-updated-dashboards/

我排队图表的数据更改。这适用于序列图表，但是我收到的股票图表有以下错误：

ERROR TypeError: Cannot set property 'dataContext' of undefined
    at b.parseStockData (amstock.js:formatted:232)
    at b.updateData (amstock.js:formatted:145)
    at b.afterWrite (amstock.js:formatted:91)
    at b.write (amstock.js:formatted:52)
    at b.validateNow (amstock.js:formatted:1143)
    at index.js:335
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:392)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (zone.js:142)
    at NgZone.webpackJsonp.../../../core/@angular/core.es5.js.NgZone.runOutsideAngular (core.es5.js:3844)
    at AmChartsService.webpackJsonp.../../../../@amcharts/amcharts3-angular/es2015/index.js.AmChartsService.updateChart (index.js:333)

这是我的代码（updateChart =＆gt; parseStockData发生错误）：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Subject, Observable, Subscription } from 'rxjs/Rx';
import { WebsocketService } from '../../services/websocket.service';

import { SensorData } from '../../entities/sensordata';
import { AmChartsService, AmChart } from "@amcharts/amcharts3-angular";
import { MessageTypes } from '../../app.enums';

@Component({
    templateUrl: 'first.component.html',
    providers: [WebsocketService, AmChartsService]
})
export class DashboardComponent implements OnInit {
    private chart: AmChart;
    public chartData: Array<any> = [];
    private socket: Subject<any>;        
    private updateQueue = [];
    private finishedLoading: Boolean = false;

    results: string[];

    constructor(
        private _websocketService: WebsocketService,
        private AmCharts: AmChartsService) {

        this.socket = _websocketService.createWebsocket();
        let updateChartInterval = setInterval(() => {
            this.processUpdateQueue();
            if (this.finishedLoading) {
                clearInterval(updateChartInterval);
            }
        }, 500);
    }

    public handleData(data: SensorData): void {
         if (data.messageType == MessageTypes.BVP) {
            this.chartData.push({
                date: new Date(data.data.timestamp),
                bvp: data.data.value
            });
        }
        if (data.messageType == MessageTypes.GSR) {
            this.chartData.push({
                date: new Date(data.data.timestamp),
                gsr: data.data.value
            });
        }
        this.updateQueue.push({ "chart": this.chart, "data": this.chartData })
    };

    public processUpdateQueue(): void {
        if (this.updateQueue.length) {
            let item = this.updateQueue.shift();
            if (item != undefined) {
                this.AmCharts.updateChart(item.chart, () => {
                    item.chart.dataSets[0].dataProvider.push(item.data);
                  });
            }
        }
    };

    ngAfterViewInit() {
        this.chart = this.AmCharts.makeChart("chartdiv", this.makeOptions());
    }

    makeOptions() {
        return {
            "type": "stock",
            "theme": "light",

            "glueToTheEnd": true,

            "dataSets": [{
                "title": "first data set",
                "dataProvider": this.chartData,
                "categoryField": "date"
            }],

            "panels": [{
                "showCategoryAxis": false,
                "title": "Value",
                "percentHeight": 60,
                "stockGraphs": [{
                    "id": "g1",
                    "valueField": "bvp"
                }],
                "stockLegend": {}
            }, {
                "title": "Volume",
                "percentHeight": 40,
                "stockGraphs": [{
                    "valueField": "gsr",
                    "type": "column"
                }],
                "stockLegend": {}
            }],

            "chartScrollbarSettings": {
                "graph": "g1"
            },
        };
    }


    ngOnDestroy() {
        if (this.chart) {
            this.AmCharts.destroyChart(this.chart);
        }
    }

    ngOnInit(): void {
        this.socket.subscribe(
            message => {
                if (message.data == "finished") {
                    this.finishedLoading = true;
                    console.log("finished loading data");
                } else {
                    let data: SensorData = JSON.parse(message.data);
                    this.handleData(data);
                }

            },
            err => {
                console.log(err)
            }
        );
    }
}

Answer 1

我发现了问题。将makeOptions中的属性dataSets更改为：

"dataSets": [{
            "title": "first data set",
            "fieldMappings": [{
                "fromField": "bvp",
                "toField": "bvp"
            }, {
                "fromField": "gsr",
                "toField": "gsr"
            }],
            "dataProvider": this.chartData,
            "categoryField": "date"
        }]

解决了这个问题。似乎股票图表需要fieldMappings。

AmStockCharts updateChart：无法设置属性＆＃39; dataContext＆＃39;未定义的

1 个答案: