无法使用来自 http get (Angular 4) 的数据填充 Chartist

Posted 2023-02-19

【中文标题】无法使用来自 http get (Angular 4) 的数据填充 Chartist

【英文标题】：Unable to populate Chartist with data from http get (Angular 4)

【发布时间】：2018-03-31 07:30:40

【问题描述】：

我正在尝试通过 api 调用加载 chartist 数据，虽然数据已返回但未在 chartist 系列中加载。

// Initialize data series
seriesData: any[] = [];

// Function to retrieve data from api
getSeriesData() 
    this.uid.getSeriesData(this.auth.getCurrentUser()).then(
      data => this.seriesData = data, // This is populated
      err => console.log(err)
    );
  

//ngInit
ngOnInit() 
   this.getSeriesData();

// Chartist
const dataDailySalesChart: any = 
      labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
      series: [
        this.seriesData // THIS IS ALWAYS EMPTY
      ]
    ;

【问题讨论】：

当然是空的，你在promise可能被解决之前构建图表数据。在回调中执行此操作，您确实拥有该数据。

@jonrsharpe，请您举个例子。我是新手。

How to return data from promise的可能重复

和其他各种。阅读 promises（或 observables，这是 Angular 原生使用的——如果你还不知道如何使用 promises，你不妨直接去使用 observables）。

【参考方案1】：

您正在尝试在 promise 解决之前构建图表数据。由于 getSeriesData 是异步的，您应该这样做，

getSeriesData() 
    this.uid.getSeriesData(this.auth.getCurrentUser()).then(
      data => this.seriesData = data, // This is populated
      this.generateChart(this.seriesData),
      err => console.log(err)
    );
  

ngOnInit() 
   this.getSeriesData();    


generateChart(chartData:any)
      const dataDailySalesChart: any = 
      labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
      series: [
       chartData
      ]
    ;
;

【讨论】：

感谢您的及时回复。您的示例有效，但我仍然无法将 dataDailySalesChart 传递给此变量，因为它在 generateChart 中。 var dailySalesChart = new Chartist.Line('#dailySalesChart', dataDailySalesChart, optionsDailySalesChart);

你可以分配数据

你太棒了！太感谢了。 @jonrsharpe，感谢您的贡献。