AmStockCharts updateChart : 정의되지 않은 'dataContext'속성을 설정할 수 없습니다.

Question

typescript 2.4.2와 함께 4.3.6을 사용하고 있습니다. 소켓에서 데이터를 읽는 중이고 데이터 제공자에게 데이터를 추가하려고합니다. 이 예제를 바탕으로

는

:

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

나는 차트의 데이터 변경을 대기하고있다. 이 직렬 차트와 함께 일하지만, 주식 차트 I 오류 다음 수신 : 여기

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 => 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": [{ 
      "title": "first data set", 
      "fieldMappings": [{ 
       "fromField": "bvp", 
       "toField": "bvp" 
      }, { 
       "fromField": "gsr", 
       "toField": "gsr" 
      }], 
      "dataProvider": this.chartData, 
      "categoryField": "date" 
     }] 

이 문제를 해결했습니다. 주식 차트에는 fieldMappings이 필요합니다.