Highcharts API-加载且无数据

Question

我想在获取图表数据并且没有数据时显示“正在加载”-我想显示“无数据”。我尝试使用Highcharts API的load和noData属性，但效果始终相同-“ Loading”与“ No Data”重叠，并且在一段时间后“ Loading”消失了。谁能给我一个例子，当同时使用这两个属性时，它们可以很好地工作吗？

Answer 1

我准备了两个演示，展示了如何实现。

• [首先，通过系列配置初始化图表（数据是一个空数组），我使用setTimeout作为获取数据的模拟。数据到来时，将根据新数据是否为空数组来更新系列。

演示：https://jsfiddle.net/BlackLabel/1dg2zyus/

setTimeout(function() {
  let data = [];
    //let data = [1,2,3,4,5];

  if (data.length) {
    chart.series[0].update({
      data: data
    })
  }

  chart.hideLoading();
}, 1000)

• 在第二个演示中-图表在没有系列配置的情况下初始化。同样，setTimeout被用作模拟。当数据到来时-这次我们可以使用addSeries功能将数据添加到图表中。

演示：https://jsfiddle.net/BlackLabel/97jd2v5e/

setTimeout(function() {
  let data = [];
    //let data = [1,2,3,4,5];

  if (data.length) {
    chart.addSeries({
      data: data
    })
  }

  chart.hideLoading();
}, 1000)

API：https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries

API：https://api.highcharts.com/class-reference/Highcharts.Series#update