使用彗星实时更新谷歌图表答案

【问题标题】：Update Google Chart in real time with comet使用彗星实时更新谷歌图表
【发布时间】：2012-04-15 21:40:07
【问题描述】：

我想使用 Google Chart 创建一个实时更新的条形图。当用户加载页面时，我想显示当前结果。但是一旦我的数据库中的数据发生变化，我想将这些变化推送到客户端并更新图表。

这是来自 Google 图表页面的条形图示例：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Sales');
    data.addColumn('number', 'Expenses');
    data.addRows([
      ['2004', 1000, 400],
      ['2005', 1170, 460],
      ['2006', 660, 1120],
      ['2007', 1030, 540]
    ]);

    var options = {
      title: 'Company Performance',
      vAxis: {title: 'Year',  titleTextStyle: {color: 'red'}}
    };

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

我想我可以使用 Ajax-Request 每隔几秒钟提取一次数据并重新绘制图表。但也许谷歌图表中有一些我缺少的内置方法。我也读过很多关于Comet 的文章，但我从未实现过这个概念。

还有其他人遇到过这个问题吗？

【问题讨论】：

标签： comet google-visualization

【解决方案1】：

在计时器上实现 AJAX 是最简单的解决方案：

// using jQuery for simplicity, but you can implement in other libraries or vanilla javascript if you want
function drawChart() {
    var options = {
        title: 'Company Performance',
        vAxis: {title: 'Year',  titleTextStyle: {color: 'red'}}
    };

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

    function updateChart () {
        $.ajax({
            url: 'path/to/data/source/',
            data: {/* any parameters you need to pass to the server to get your data back */},
            dataType: /* text, json, XML, whatever your server returns */,
            success: function (response) {
                // use response to create/update DataTable
                chart.draw(data, options);
                // update the chart again in 2 seconds
                setTimeout(updateChart, 2000);
            },
            error: function (response) {
                // handle errors
            }
        });
    }
    updateChart();
}

使用 Comet 服务实现起来有点复杂，因为它需要在 javascript 和您的服务器上设置类似 Socket.Io 的内容。

使用 Comet 服务将始终保证图表中的最新数据，而 AJAX 更易于实现。 Comet 需要在 AJAX 发出多个独立请求时保持与服务器的活动连接。

【讨论】：