我想使用chart.showLoading()和chart.hideLoading()，但我不知道在哪里放置它。当json data从数据库获取数据时，我想要显示动画gif或文本消息。
您必须在获取数据之前初始化图表，并在chart.load事件中调用chart.showLoading()。接下来，当获取数据时，使用chart.hideLoading()删除加载并使用chart.addSeries()方法添加每个系列。检查下面发布的演示和代码。
码：
$.getJSON('https://api.jsonbin.io/b/5c9499db08b9a73c3abeec4a', function(data) {
var X = [],
Y = [],
temp = [],
dataLength = data.length,
// set the allowed units for data grouping
groupingUnits = [
[
'millisecond', // unit name
[1, 2, 5, 10, 20, 25, 50, 100, 200, 500] // allowed multiples
],
[
'second', [1, 2, 5, 10, 15, 30]
],
[
'minute', [1, 2, 5, 10, 15, 30]
],
[
'hour', [1, 2, 3, 4, 6, 8, 12]
],
[
'day', [1]
],
[
'week', [1]
],
[
'month', [1, 2, 3, 4, 6]
],
[
'year',
null
]
],
i = 0;
for (i; i < dataLength; i += 1) {
X.push([
data[i][0], // the date
data[i][1]
]);
Y.push([
data[i][0], // the date
data[i][2]
]);
temp.push([
data[i][0], // the date
data[i][3] // the temp
]);
}
var chartSeries = [
{
type: 'line',
name: 'Y',
data: Y,
yAxis: 0,
dataGrouping: {
units: groupingUnits
},
tooltip: {
valueDecimals: 7
},
lineWidth: 3
},
{
type: 'line',
name: 'X',
data: X,
yAxis: 1,
dataGrouping: {
units: groupingUnits
},
tooltip: {
valueDecimals: 7
},
lineWidth: 3
},
{
type: 'line',
name: 'temp',
data: temp,
yAxis: 2,
dataGrouping: {
units: groupingUnits
},
tooltip: {
valueDecimals: 4
},
lineWidth: 3
}
];
chart.hideLoading();
chart.addSeries(chartSeries[0], false);
chart.addSeries(chartSeries[1], false);
chart.addSeries(chartSeries[2], false);
chart.redraw();
});
// create the chart
var chart = Highcharts.stockChart('container', {
chart: {
events: {
load: function() {
this.showLoading();
}
}
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 2,
text: '2d'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: true, // it supports only days
selected: 2, // day
buttonTheme: { // styles for the buttons
style: {
fontSize: '20'
}
},
},
title: {
text: '<span style="font-size:28px">Tilt Meter Labuhan<span>'
},
yAxis: [{
labels: {
align: 'right',
x: -3,
style: {
fontSize: '18px'
}
},
opposite: false,
title: {
text: 'X ',
style: {
fontSize: '18px'
}
},
height: '50%',
lineWidth: 3,
resize: {
enabled: true
}
},
{
labels: {
align: 'right',
x: 3,
style: {
fontSize: '18px'
}
},
title: {
text: 'Y',
style: {
fontSize: '18px'
}
},
height: '50%',
lineWidth: 3,
opposite: true,
resize: {
enabled: true
}
},
{
labels: {
align: 'right',
x: -3,
style: {
fontSize: '18px'
}
},
title: {
text: 'Temperature',
style: {
fontSize: '18px'
}
},
top: '55%',
height: '50%',
offset: 0,
lineWidth: 2
}
],
tooltip: {
headerFormat: '<span style="font-size:18px">{point.x:%A, %b %e, %Y}</span>',
style: {
fontWeight: 'bold',
fontSize: '20px'
},
split: true
},
series: []
});<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<div id="container" style="height:100%;
width:100%;
position:absolute;"></div>演示：
API参考：