添加大量系列时HighCharts冻结

时间:2013-05-13 15:08:32

标签: highcharts

我试图生成科学的气泡图,并假设它被显示为仪表板。该图表旨在反映气泡,这些气泡将使用ajax调用在大小和位置上发生变化。

我能做到这一点,但面临性能问题。 ajax平均返回80到150个项目,每个项目由一系列类型的气泡呈现。

因此,我面临两个问题

1)浏览器在每次请求时冻结,我试图让javascript在每次添加操作之间休眠,但没有解决问题。

2)在第一次ajax调用之后,其他调用将需要更改现有Seri​​es系列的事实有所变化。如何检索现有系列并在需要更改时更改其值?

$(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'
            }

        });
    });

});

0 个答案:

没有答案