Question

我正在使用此npm包制作图表：https://www.npmjs.com/package/angular-highcharts

我有一个界面，我想从界面中取值来填充图表。在这个阶段，我只想要一个折线图。

我尝试了各种使用数组的方法，只要我通过对所有值进行硬编码来初始化数组就可以正常工作，但是我想将服务中的值动态加载到接口中，然后采用从界面到图表的值。我做错了什么？

这是我的component.ts

import { Component, OnInit } from '@angular/core';
import { Chart } from 'angular-highcharts';
import { WeatherstatsService } from '../weatherstats.service';
import 'rxjs/add/operator/map';

interface WeatherData {
  id: any;
  year: any;
  measurement_type: string;
  location: string;
  month_or_season: string;
  value?: any;
}

let datavalues: WeatherData [] = [];

@Component({
  selector: 'weatherchart',
  templateUrl: './weatherchart.component.html',
  styleUrls: ['./weatherchart.component.css']
})
export class WeatherchartComponent implements OnInit {

  constructor(private weatherstatsservice: WeatherstatsService) { }



  title = "Title";
  data: any;
  datavalues = datavalues;
  values: Array<number> = [];


  chart = new Chart({
        chart: {
          type: 'line'
        },
        title: {
          text: this.title,
        },
        credits: {
          enabled: false
        },
        series: [{
          name: 'Line 1',
          data: this.datavalues.year,
        }]
      });

    // add point to chart serie
    add() {
      this.chart.addPoint(Math.floor(Math.random() * 10));
    }

    ngOnInit() {
          this.weatherstatsservice.getWeatherData()
            .subscribe(data => {
              this.data = data.slice(0, 100);
             if(this.data){
              this.data.forEach( res => {
                this.datavalues.push({
                  id: res.id,
                  year: res.year,
                  measurement_type: res.measurement_type,
                  location: res.location,
                  month_or_season: res.month_or_season,
                  value: res.value,
                })
               });
               console.log(this.datavalues);

            }
        })
      }


    }

Answer 1

这是库的常见问题，我遇到了与ng2-chart相同的问题，可以通过使用API重绘它来解决。

您可以通过将图表实例作为

传递来实现

<chart [options]="options" (load)="saveInstance($event.context)"></chart>

和TS

chart: Object;
saveInstance(chartInstance): void {
     this.chart = chartInstance;
}

当您从API获取数据时，您可以重绘为

updateSeries(data: Array<any>): void {
   this.chart.series[0].setData(data);
}

使用Angular 5从接口获取数据到highcharts图表

1 个答案: