1

我正在尝试生成一个科学气泡图,并且假设它以仪表板的形式呈现。该图表旨在反映气泡,这些气泡将使用 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'
            }

        });
    });

});
4

0 回答 0