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

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/