我试图生成科学的气泡图,并假设它被显示为仪表板。该图表旨在反映气泡,这些气泡将使用ajax调用在大小和位置上发生变化。
我能做到这一点,但面临性能问题。 ajax平均返回80到150个项目,每个项目由一系列类型的气泡呈现。
因此,我面临两个问题
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'
}
});
});
});