我有一个 Highstock 图表,其中加载了一些默认数据。然后基于用户操作(按钮点击),我使用来自服务器的新数据重新绘制图表。我有一个从服务器检索数据的通用函数,我从图表的加载事件以及用户操作中调用它。但是,图表不会在加载时呈现。当我尝试在某些用户操作上重绘图表时,它会正确地在导航区域中呈现图表,但不会在主图表区域中呈现。如果我将 StockChart 更改为简单的 HighChart,图表会在用户点击时呈现良好,但在加载时不会呈现。
有人可以帮忙吗?谢谢!!
这是我的代码:
$(function(){
// global to allow access to options when dynamically loading series.
var statsChart;
// global requestOptions, so that event handlers can just update
// the specific option instead of building it again.
var requestOptions = {
'resolution': 'hourly' // default to an hour
};
var chart_options = {
chart: {
type: 'spline',
renderTo: 'stats-chart-div',
events:{
load: updateChartData
}
},
rangeSelector : {
selected : 1,
buttons : [{
type: 'hour',
count: 6,
text: '6H'
}, {
type: 'day',
count: 1,
text: '1D'
}, {
type: 'day',
count: 7,
text: '1W'
}, {
type: 'week',
count: 4,
text: '1M'
}, {
type: 'month',
count: 12,
text: '1Y'
}]
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Stat Count'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
exporting: {
buttons: {
hourlyButton: {
x: -150,
onclick: function () {
requestOptions['resolution'] = 'hourly';
updateChartData();
},
symbol: '',
text: 'Hourly',
theme: {
'stroke-width': 1,
'fill': '#808080',
'fill-opacity': 0.75
},
tooltip: {
text: 'Stats aggregated hourly'
}
},
dailyButton: {
id: 'daily',
x: -100,
onclick: function () {
requestOptions['resolution'] = 'daily';
updateChartData();
},
symbol: '',
text: 'Daily',
theme: {
'stroke-width': 1,
'fill': '#808080',
'fill-opacity': 0.75
}
},
weeklyButton: {
x: -40,
onclick: function () {
requestOptions['resolution'] = 'weekly';
updateChartData();
},
symbol: '',
text: 'Weekly',
theme: {
'stroke-width': 1,
'fill': '#808080',
'fill-opacity': 0.75
}
}
}
},
series : [
{
name: 'Average Stats',
id: 'avg-stats',
data: []
}
]
};
var updateChartData = function() {
fetchData(function(data){
var series = statsChart.get('avg-stats');
if (series) {
series.setData(data['avg_stats'], false);
}
statsChart.redraw();
}
};
var fetchData = function(callback) {
$.getJSON('/index.php/getStats',
requestOptions,
function(data) {
statsData = JSON.parse(data.results);
callback(statsData);
}
);
}
statsChart = new Highcharts.StockChart(chart_options);
});