Question

我正在使用Angular 6并尝试实现Chart.js折线图。基本上，我要为两个数组调用我的API：一个weight_data数组和一个weight_date数组，并将它们用于图表。

我将从API请求中获得的数组存储在两个实例中：this.weight_date和this.weight_data。

以下是图表的代码：

//   code for chart here
this.chart = new Chart(this.chartRef.nativeElement, {
  type: 'line',
  data: {
    labels: this.weight_date, // your labels array
    datasets: [
      {
        data: this.weight_data, // your data array
        borderColor: '#e0573a',
        fill: true
      }
    ]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        display: true
      }],
      yAxes: [{
        display: true
      }],
    },
    title: {
      display: true,
      text: 'Weight Tracker',
      fontFamily: "'Montserrat', sans-serif",
      fontColor: '#272727',
      fontSize: 18,
      padding: 12
    },
    layout: {
      padding: {
          left: 10,
          right: 20,
          top: 0,
          bottom: 0
      }
    },
    gridLines: {
      drawOnChartArea: true
    },
  }
});

当我使用预编码的数组（日期为["11/02/18", "11/03/18", "11/04/18"]，权重为[65, 66, 67]）时，它可以正常工作。但是，当我尝试使用两个实例时，图表变成空白。没有任何错误，只是空白。

我先进行API调用，然后分别在ngOnInit中初始化图表。我在这里想念什么？

Answer 1

您似乎想订阅一个可以提供数据的可观察对象，一旦输入，就可以初始化图表。通常，我们希望在服务内进行HTTP调用，但是为了简化起见，这是我们可以在组件内进行的操作：

import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import {Component, OnInit} from '@angular/core';


export class MyChart implements OnInit {

  constructor(private http: HttpClient) { }

  private getData() {
    let url = '[SOME-URL]' // your path to the data API endpoint
    return this.http.get(url) as Observable<Array<any>>; // you would want to use correct typings here, instead of <any>
  }

  ngOnInit() {
    this.getData().subscribe((data: any) => {
      console.log(data);
      // assign your data here, and then initialize your chart.
    });
  }
}

Answer 2

我刚刚发现我做错了什么：我使用的是基于承诺的axios，因此考虑@JeffFhol的建议，由于我同时初始化图表时我的两个实例都是空白的发出API请求。

解决方案是在axios请求的then子句中初始化图表，以确保我的实例不为空。

以下是有效的代码段：

axios({
  method: 'post',
  url: 'url_to_api',
  headers: {
    'Content-Type' : 'application/json'
     // custom data headers, etc.
  },
  data: {
    // data to be sent
  }
})
.then(response => {
  this.weight_dates = response.data.weight_date;
  this.weight_data = response.data.weight_data;

  //   code for chart here
})
.catch(error => {
  console.log(error)
})

角度图表未正确显示数据

2 个答案: