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

Question

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

下面是伪代码：

// 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/