我有一个页面上有两个HighCharts图表,想知道是否有方法可以加速图表的加载时间。第一个是主要图表,有两个系列;第二个是“缩略图”图表,有四个系列。
我会在列表框中填充一些日期,并且当用户选择每个日期时,我会发起一个ajax调用来获取一些数据。
我使用类似于构造函数的方式来构建我的图表,如下所示...
如果我从loadData函数中删除与chartMini / optionsMini有关的所有内容,主要的图表也加载得非常快。但是一旦我把'Mini'加回去,事情就变慢了,两个图表都需要大约5秒钟才能显示出来(实际上,我经常在FireFox中收到“未响应”的消息)。我的json对象中每个“数据”元素都有700个数据点(我认为这并不特别大)。
我想我的高级图表经验导致了速度慢。请问您有任何建议,我如何提高这两个图表的构建/加载时间性能。
感谢您的阅读。
我会在列表框中填充一些日期,并且当用户选择每个日期时,我会发起一个ajax调用来获取一些数据。
我使用类似于构造函数的方式来构建我的图表,如下所示...
basicMaxChart = function() {
options = {
chart: {},
/*missed for brevity*/,
series: [{},{}]
}; // options
return options;
}; // Max
basicMiniChart = function() {
optionsMini = {
chart: {},
/*missed for brevity*/,
series: [{},{},{},{}]
}; // optionsMini
return optionsMini;
}; // Mini
我的文档准备完毕函数,
// Globals
var options;
var optionsMini;
var chart;
var chartMini;
jQuery("document").ready(function() {
function createChart() {
options = $.extend({}, basicMaxChart options);
chart = new Highcharts.Chart(options);
};
function createMiniChart() {
optionsMini = $.extend({}, basicMiniChart(), optionsMini);
chartMini = new Highcharts.Chart(optionsMini);
};
// create some empty charts for place holders
createChart();
createMiniChart();
function loadData(){
// missed for brevity, but declare some vars and get some values from inputs
var aLen = document.getElementById("someInput").value;
var d1 ...
var data = {
compareD1 : d1,
m1 : m1,
someVal : aLen
};
$.post("getSomeData.php", data, function(json) {
/* Clearing the series first or ‘Destroying’ the chart only only serves to make things worse …
if (typeof chartMini != 'undefined') {
while(chartMini.series.length > 0)
chartMini.series[0].remove();
//chartMini.destroy();
}
*/
options.series[0] = json[0];
options.series[1] = json[1];
optionsMini.series[0] = json[3];
optionsMini.series[1] = json[4];
optionsMini.series[2] = json[5];
optionsMini.series[3] = json[6];
chart = new Highcharts.Chart(options);
chartMini = new Highcharts.Chart(optionsMini);
chart.series[0].options.color = 'blue';
chart.series[0].update(chart.series[0].options);
chart.series[1].options.color = 'red';
chart.series[1].update(chart.series[1].options);
chartMini.series[0].options.color = '#A9CBE9';
….
….
chartMini.series[3].update(chartMini.series[3].options);
}, "json");
}); // ready
loadData函数发出一个ajax调用并返回一个包含两个图表数据的json对象,大约需要500ms的时间。(我对getSomeData.php脚本的速度感到满意)。如果我从loadData函数中删除与chartMini / optionsMini有关的所有内容,主要的图表也加载得非常快。但是一旦我把'Mini'加回去,事情就变慢了,两个图表都需要大约5秒钟才能显示出来(实际上,我经常在FireFox中收到“未响应”的消息)。我的json对象中每个“数据”元素都有700个数据点(我认为这并不特别大)。
我想我的高级图表经验导致了速度慢。请问您有任何建议,我如何提高这两个图表的构建/加载时间性能。
感谢您的阅读。
chart.series[0].update(chart.series[0].options);
这样的代码行。 - Halvor Holsten Strand