使用 Observable 在 Angular 中创建具有 Chart.JS 的图表

Question

目前我正在尝试使用 Angular 和 Chart.JS 让图表正常工作。

当前的问题是无论我做什么，我都没有将 Observable 放入图表数据中。

error TS2339: Property 'cool_data' does not exist on type 'Observable<Object>'.

我的第一个想法是 Observable 需要一些时间来获取一些数据，并且需要一些时间才能完成（大约 50k 数据集）。这可能就是发生错误的原因，因为它在创建图表时是空的。有人知道如何将我的 Observable 放入其中或其他解决方案？

我目前使用的服务功能如下所示。

...
  getData(id: number): Observable<Data[]> {
          return this.http.get<Data[]>(this.dataUrl + id);
                  console.log(this.http.get<Data[]>(this.dataUrl));
                  }
}

我的组件是这样的。提醒一下，我尝试输入 data: this.data.cool_data 但出现上述错误。

...
data: Data[];
  getData(): void{
  const id = +this.route.snapshot.paramMap.get('id');
        this.coolService.getData(id)
                .subscribe(data => this.data = data);
  }

  goBack(): void{
   this.location.back();
   }


  ngOnInit(): void {
  this.getData();
  }

lineChartData: ChartDataSets[] = [
    { data: this.data.cool_data, label: 'Crude oil prices' },
  ];

  lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June'];

  lineChartOptions = {
    responsive: true,
  };

  lineChartColors: Color[] = [
    {
      borderColor: 'black',
      backgroundColor: 'rgba(255,255,0,0.28)',
    },
  ];

  lineChartLegend = true;
  lineChartPlugins = [];
  lineChartType = 'line';
 }

组件的 HTML 文件：

<div *ngIf="data">
<div style="display: block;">
  <canvas baseChart width="400" height="400"
    [datasets]="lineChartData"
    [labels]="lineChartLabels"
    [options]="lineChartOptions"
    [colors]="lineChartColors"
    [legend]="lineChartLegend"
    [chartType]="lineChartType"
    [plugins]="lineChartPlugins">
  </canvas>
</div>

Answer 1

根据您的 this.data = [{"id":1,"cool_data":"4.5","station_id":1},{...}] 评论，您可以使用数组 map 函数创建一个 cool_data 值数组。另外 lineChartData 应该在 HTTP 订阅中分配，因为 this.data 是异步的。

尝试以下方法

data: Data[];
lineChartData: ChartDataSets[] = [];     // <-- don't assign the value here
lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June'];
lineChartOptions = {
  responsive: true,
};
lineChartColors: Color[] = [
  { borderColor: 'black', backgroundColor: 'rgba(255,255,0,0.28)' },
];
lineChartLegend = true;
lineChartPlugins = [];
lineChartType = 'line';

getData(): void {
  const id = +this.route.snapshot.paramMap.get('id');
  this.coolService.getData(id).subscribe(
    response => {
      this.data = response;
      this.lineChartData.push({             // <-- push value to `lineChartData`
        data: response.map(item => item.cool_data),  
        label: 'Crude oil prices'
      });
    },
    error => { }
  );
}

ngOnInit(): void {
  this.getData();
}

使用 Observable 在 Angular 中创建具有 Chart.JS 的图表

Using an Observable to create Charts with Chart.JS in Angular

typescript

ng2-charts

angular