Question

我正在尝试在新的角度4项目中创建动态高图。目前我正在尝试将一个服务注入到我的组件中，该组件包含将在高图中使用的动态数据。此数据作为数组传递。我正在使用https://github.com/cebor/angular-highcharts/blob/4/README.md作为角度包装版本的highcharts。

当使用数据集进行硬编码时，我能够获得高效工作，但是我无法从我的服务传递动态数据。我的component.ts文件目前看起来像

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);
  }

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


}

每当我记录我的this.stales变量时，它看起来都是正确的。记录我的数组的随机索引也会返回正确的值。我也尝试使用charts.js复制相同的功能，但遇到同样的问题所以我认为这是由于我缺乏角度知识。任何帮助表示赞赏。

Answer 1

试试这个：

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

Angular中的动态高图

1 个答案: