我有一个包含 2 个 highCharts 的页面,想知道是否有办法加快图表的加载时间。第一个是包含 2 个系列的主图表,第二个更像是一个“缩略图”图表,有 4 个系列。
我用日期列表填充一个列表框,当用户选择每个日期时,我进行 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 调用并在大约 500 毫秒内返回一个包含两个图表数据的 json 对象。 (我对 getSomeData.php 脚本的速度很满意)。
如果我从 loadData 函数中删除与 chartMini/optionsMini 相关的所有内容,主图表的加载速度也会非常快。但是,一旦我将“Mini”放回原处,事情就会变慢,并且两个图表都不会显示大约 5 秒(事实上,我经常收到“FireFox 中的无响应消息”)。我的 json 对象中的每个“数据”元素都有 700 个数据点(我认为这不是特别大)。
我认为我对 highcharts 缺乏经验是导致速度缓慢的原因。请问您是否对我如何改进这两个图表的构建/加载时间的性能有任何建议。
感谢阅读。
最佳答案
从您显示的代码来看,成本高昂的部分是在您创建图表之后,但请继续更新它。您进行的每个 update
方法调用都将强制执行 redraw
,这对资源要求很高。
理想情况下,您可以在创建图表之前完成所有选项。这稍微取决于您的 JSON 以使其正确,但想象一下这样的事情:
options.series[0] = json[0];
options.series[0].options.color = 'blue';
options.series[1] = json[1];
options.series[1].options.color = 'red';
optionsMini.series[0] = json[3];
optionsMini.series[0].options.color = '#A9CBE9';
// ...
chart = new Highcharts.Chart(options);
chartMini = new Highcharts.Chart(optionsMini);
如果您的 JSON 中尚不存在 options
对象,您可能必须创建它。
另一种懒惰的变体是推迟当前代码中的重绘
,然后在它之后进行一次手动重绘
。想象一下:
chart = new Highcharts.Chart(options);
chartMini = new Highcharts.Chart(optionsMini);
chart.series[0].options.color = 'blue';
chart.series[0].update(chart.series[0].options, false); // false to prevent redraw
chart.series[1].options.color = 'red';
chart.series[1].update(chart.series[1].options, false); // false to prevent redraw
chartMini.series[0].options.color = '#A9CBE9';
chartMini.series[0].update(chartMini.series[0].options, false); // false to prevent redraw
// ...
chart.redraw(); // force redraw after all changes are made
chartMini.redraw(); // force redraw after all changes are made
请注意,这比第一种方法慢,因为它需要多次更新系列中的大量数据,并且还需要对每个图表进行一次重绘
,而第一种方法不会发生这种情况。
关于javascript - HighCharts 在构建多个图表时加载数据很慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29320237/