Highcharts API - 加载但没有数据

Question

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

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