ajax - Ajax 和 Highcharts - 在检索到数据之前显示“正在加载”，然后填充图表

Question

我有一些 php 脚本，它们基本上需要很长时间才能检索数据。因此，这会影响 highcharts 加载时间，因为当前代码仅在检索到所有数据后才写入图表，因为只有在所有处理完成后才会回显 highcharts 代码。

这会导致页面在检索数据之前基本上什么都不显示。目标是让 highcharts 立即加载，然后使用 php 脚本返回的数据写入系列。

所以，我想要的是让所有图表立即加载并显示没有数据的“加载”，然后在 php 脚本完成后使用 setData 将数据传递给图表系列。

我只是想知道是否有人有任何这样做的例子？我遇到的另一个问题是只能在 $(document).ready(function() 函数中设置数据。例如

作品： http: //preview.tinyurl.com/b724bxo

休息： http: //preview.tinyurl.com/a7mqqkc

非常感谢，任何帮助将不胜感激。

Answer 1

不知道你是否还在寻找这个，但要显示“加载”消息，可以在图表上使用“setLoading()”方法。

pipeline_by_sales_stage_highchart.setLoading("Loading...")

检查这个小提琴：http: //jsfiddle.net/QSfEJ/

Answer 2

您不能访问范围外的变量、将其移动到该范围内或使变量成为全局变量。

• http://jsfiddle.net/M2jv7/33/ - 范围内

• http://jsfiddle.net/M2jv7/34/ -全局变量

  var pipeline_by_sales_stage_highchart;
  $(document).ready(function () {
              pipeline_by_sales_stage_highchart = new Highcharts.Chart({
  });
  
  ...
  
  // somewhere:
  pipeline_by_sales_stage_highchart.series[0].setData(data);
  

Answer 3

在这里查看我的答案：Highchart series update in javascript

---

概括 ：

用空系列初始化图表，然后addSeries在循环中使用来更新图表，如下所示：

this.dataFromApi.forEach(function(serie) { // for each row of data, add a series
  this.chart.addSeries(serie, false); // false is to prevent redrawing
}.bind(this));
this.chart.redraw(); // manually redraw
this.chart.hideLoading(); // stop loading if showLoading() was call before

jsFiddle在这里：https ://jsfiddle.net/qyh81spb/