我正在尝试生成一个科学气泡图,并且假设它以仪表板的形式呈现。该图表旨在反映气泡,这些气泡将使用 ajax 调用在大小和位置上发生变化。
我能够做到这一点,但我面临着性能问题。ajax 平均返回 80 到 150 个项目,每个项目由 Series 类型的气泡呈现。
因此,我面临两个问题
1)浏览器在每次请求时都会冻结,我试图让javascript在每次添加操作之间休眠但没有解决问题。
2) 在第一次ajax 调用之后,其他调用将需要改变现有的Series,它们的事实发生了变化。如果需要更改,我如何检索现有系列并更改其值?
$(function () {
function addPoint(chart){
$.get("{{ main_site_url }}/dashboard/likelihood/ajax/",
function(data) {
$.each(data, function(k, dic) {
var newSeries = new Highcharts.Series();
newSeries.type = 'bubble';
newSeries.id = dic.id
newSeries.data = [[dic.id, dic.views, dic.likes] ];
setTimeout(function() {
chart.addSeries(newSeries);
}, 2000);
});
}, "jsonp"
);
}
$(document).ready(function() {
$('#container').highcharts({
chart: {
type: 'bubble',
zoomType: 'xy',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var chart = this;
setInterval(function() {
addPoint(chart)
}, 3000);
}
}
},
title: {
text: 'Likelihood bubbles'
}
});
});
});