在 promise 返回数据后渲染 chart-js 折线图

Question

用户转到他们的仪表板页面，我有一个工厂返回该页面的数据。当 promise returns 表更新正常时，但 chart-js 不呈现。

如果我模拟一些数据并将其放在我的 .then() 代码的外部图表将呈现在页面上，但将其移入内部却不会.

我认为问题出在这段代码运行 "too early" 上。它在返回之前查找 lineOptions 和 lineData。

<canvas linechart=""
    options="lineOptions"
    data="lineData"
    height="260"
    responsive="false"
    width="1200"></canvas>

我是 Angular 的新手，我不太确定如何解决这个先有鸡还是先有蛋的问题。

如何让 <canvas> 等待 lineData 和 lineOptions 被填充？

我试过 ng-show/ng-hide 调用一个函数来检查数据，但这不起作用。我也试过 ng-if 也没有效果。

提前致谢。

Answer 1

我不确定它在您的代码中的样子。但是你试过这样做吗？

var chartInstance = new Chart(canvasContext);

// then for your promise object:    
{"some deferred object that retrieves the data"}.then(function(data) {
    chartInstance.Line(data);
});

参考文档：http://www.chartjs.org/docs/#getting-started-creating-a-chart

在 promise 返回数据后渲染 chart-js 折线图

Rendering a chart-js line chart after a promise has returned data

charts

angularjs