Highcharts show loading icon when fetching data in javascript - Stack Overflow

admin管理员组

文章数量:1405312

We want to show loading icon when the data loads and chart is made in highcharts.

Below is pseudo code:

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

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

We want to show loading icon when the data loads and chart is made in highcharts.

Below is pseudo code:

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

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

• javascript
• highcharts
• loader

Share Improve this question Follow edited Feb 3, 2017 at 7:47 ppasler 3,72966 gold badges3535 silver badges5454 bronze badges asked Feb 3, 2017 at 6:59 user2820794user2820794 3711 silver badge22 bronze badges 3

• 2 What is the problem then? – VPK Commented Feb 3, 2017 at 7:10
• Please explain what you have tried, what you are expecting, if you have read the handbook. – pinturic Commented Feb 3, 2017 at 7:13
• You can set background image - see the answers here, read API for other options api.highcharts./highcharts/loading - example jsfiddle/86nuH/127 – morganfree Commented Feb 3, 2017 at 11:29

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Render chart without data, then show loading screen, fetch data, hide loading screen.

Example:

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

Live example: https://jsfiddle/hLj1advd/

本文标签： Highcharts show loading icon when fetching data in javascriptStack Overflow