0

我正在使用这个 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);

            }
        })
      }


    }
4

1 回答 1

0

这是库的常见问题，我遇到了与 ng2-charts 相同的问题，可以通过使用 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);
}
于 2017-12-01T16:09:34.880 回答