Dynamische High Charts in Angular

Question

Ich versuche ein dynamisches Highchart in einem neuen eckigen 4 Projekt zu erstellen. Momentan versuche ich einen Dienst in meine Komponente zu integrieren, der die dynamischen Daten enthält, die im Highchart verwendet werden. Diese Daten werden als Array übergeben. Ich benutze https://github.com/cebor/angular-highcharts/blob/4/README.md für eine eckige Version von Highcharts.

Ich kann ein highchart arbeiten, wenn es hart mit einem Datensatz codiert ist, aber ich habe Schwierigkeiten, die dynamischen Daten von meinem Dienst zu übergeben. Meine component.ts-Datei sieht im Moment so aus:

import { Component, OnInit } from '@angular/core'; 
import { SiteService } from '../../site.service'; 
import { Chart } from 'angular-highcharts'; 

@Component({ 
    selector: 'app-content', 
    templateUrl: './content.component.html', 
    styleUrls: ['./content.component.css'] 
}) 
export class ContentComponent implements OnInit { 

    constructor(public siteService:SiteService) { 
    this.stales = this.siteService.stales; 
    console.log(this.stales); 
    } 

    stales:number[] = []; 
    testvar:number = 0; 

/***************************************************/ 


chart = new Chart({ 
     chart: { 
     type: 'line' 
     }, 
     title: { 
     text: 'Linechart' 
     }, 
     credits: { 
     enabled: false 
     }, 
     xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 
     series: [{ 
     name: 'Line 1', 
     data: this.stales 
//this is where I am trying to use the array from the injected service as a //variable but I am getting no output 
     }] 
    }); 

    log() { 
    console.log(this.stales); 
    this.chart.addPoint(this.testvar); 
    } 



/***********************************************/ 
    ngOnInit() { 
    this.stales = this.siteService.stales; 
    this.testvar = this.stales[3]; 
    console.log(this.testvar); 
    console.log(this.stales); 
    } 

/************************************************/ 


} 

Immer wenn ich meine this.stales-Variable protokolliere, scheint alles korrekt zu sein. Das Protokollieren eines zufälligen Index meines Arrays gibt auch den richtigen Wert zurück. Ich habe auch versucht, die gleiche Funktionalität mit Charts.js zu replizieren, aber laufen Sie in das gleiche Problem, so glaube ich, dass dies aufgrund meines mangelnden kantigen Wissens ist. Jede Hilfe wird geschätzt.

Answer 1

Versuchen Sie folgendes:

@Component({ 
    selector: 'app-content', 
    templateUrl: './content.component.html', 
    styleUrls: ['./content.component.css'], 
    providers: [ SiteService ] // add this as a provider 
})