Question

使用socket.io实时更新数据。在同一时间浏览器中的大量更新冻结几秒钟的情况下。

我使用.setValue命令更新数据，然后使用.draw重绘图表。

每个图表都有相同的结构和不同的数据......

data.addRows([
            [5,   null, null, null, null, null, 'stroke-width: 0;', null, 'stroke-width: 0;', null, null, null, null, null, null],
            [10,  null, null, 1, null, null, 'stroke-width: 0;', null, 'stroke-width: 0;', null, null, 1, null, null, null],
            [15,  null, null, 1, null, null, 'stroke-width: 0;', null, 'stroke-width: 0;', null, null, 1, null, null, null],
            [20,  null, null, 1, null, null, 'stroke-width: 0;', null, 'stroke-width: 0;', null, null, 1, null, null, null],
            [25,  null, null, null, null, null, 'stroke-width: 0;', null, 'stroke-width: 0;', null, null, null, null, null, null],
            [30,  null, null, null, null, null, 'stroke-width: 0;', null, 'stroke-width: 0;', null, null, null, null, null, null],
            [35,  null, null, null, null, null, 'stroke-width: 0;', null, 'stroke-width: 0;', null, null, null, null, null, null],
            [40,  null, null, null, null, null, 'stroke-width: 0;', null, 'stroke-width: 0;', null, null, null, null, null, null],
            [45,  null, null, null, null, null, 'stroke-width: 0;', null, 'stroke-width: 0;', null, null, null, null, null, null],
            [50,  null, null, null, null, null, 'stroke-width: 0;', null, 'stroke-width: 0;', null, null, null, null, null, null],
            [55,  null, null, null, null, null, 'stroke-width: 0;', null, 'stroke-width: 0;', null, null, null, null, null, null],
            [60,  null, null, null, null, null, 'stroke-width: 0;', null, 'stroke-width: 0;', null, null, null, null, null, null],   
            [65,  null, null, null, null, null, 'stroke-width: 0;', null, 'stroke-width: 0;', null, null, null, null, null, null],
            [70,  null, null, null, null, null, 'stroke-width: 0;', null, 'stroke-width: 0;', null, null, null, null, null, null],
            [75,  null, null, null, null, null, 'stroke-width: 0;', null, 'stroke-width: 0;', null, null, null, null, null, null],
            [80,  null, null, null, null, null, 'stroke-width: 0;', null, 'stroke-width: 0;', null, null, null, null, null, null],
            [85,  null, null, null, null, null, 'stroke-width: 0;', null, 'stroke-width: 0;', null, null, null, null, null, null],
            [90,  null, null, null, null, null, 'stroke-width: 0;', null, 'stroke-width: 0;', null, null, null, null, null, null]
          ]);

Answer 1

是的，这是javascript问题，并不是特定于谷歌图表。我最终得到了这个解决方案：

 socket.on("notification", function (data) {
    for (var k = 0, len = data.length; k < len; k++) {
        var value = data[k];
        var delay_time = 0;
        var max_rows_to_process = 400;
        var current_block_number = Math.floor(k/max_rows_to_process);
        if (current_block_number) {
                delay_time = current_block_number * 1000;
            }
        doSetTimeOutDrawChart(value.chart_id, value.new_chart_data, delay_time);
   }
 }
 function doSetTimeOutDrawChart(chart_id, new_chart_data, delay){
    setTimeout(function () { 
        change_data_table_for_chart_and_redraw(chart_id, new_chart_data);
    }, delay);
  }

如何在同一页面上绘制超过50个谷歌图表，而不会在实时更新后冻结浏览器

1 个答案: