Highcharts在javascript中获取数据时显示加载图标

Question

我们希望在加载数据时显示加载图标，并在highcharts中创建图表。

以下是伪代码：

// service call
// data is pushed in data set 
// and that data is used in highcharts.

$('Chart_name').highcharts({
});

Answer 1

渲染没有数据的图表，然后显示加载屏幕，获取数据，隐藏加载屏幕。

示例：

// Options without data
const options = {
  series: [{
    data: [],
    type: 'column'
  }]
}

// Redner chart
const chart = Highcharts.chart('container', options)

// Simulate fetch request timeout, get data after some delay
setTimeout(() => {
  const data = [1,2,3]
  chart.hideLoading()
  chart.series[0].setData(data)
}, 2000)

// Show loading screen
chart.showLoading()

实例： https://jsfiddle.net/hLj1advd/