У меня есть диаграмма 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);
});
Это не помогло. Я получил ошибку highcharts 13, но я вижу оси диаграммы, легенду и кнопки экспорта. Кроме того, когда updateChartData вызывается снова, я получаю Uncaught TypeError: Object [object global] не имеет метода get. Я также попытался изменить его на this.statsChart, а затем я не видел typeError, но я все еще вижу highchart ошибку 13. Я бы догадался, если renderTo не настроен должным образом, я бы вообще не видел никаких атрибутов диаграммы. – bsam
Ошибка Highchart 13 была опечатка с моей стороны. График по-прежнему не отображается. Я также хочу добавить, что с моим исходным кодом я бы увидел диаграмму в области навигации, но не в основной области диаграммы, но событие загрузки не работает вообще. – bsam
Любые другие ошибки? У вас есть сайт с этой ошибкой? Для меня очевидно, что это не проблема Highcharts. –