ハイチャートには、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/