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/