即时刷新 Google 可视化答案

【问题标题】：Refresh Google Visualization on the fly即时刷新 Google 可视化
【发布时间】：2011-11-29 14:48:37
【问题描述】：

我目前正在通过谷歌可视化创建谷歌图表，我希望能够通过单击按钮刷新/更新此图表。我已经尝试了很多不同的方法来做到这一点，但都没有奏效，所以我正在寻找任何人都可以提出的建议。我当前的平台是 ASP.net（使用 C#），而谷歌的东西是用 javascript/jquery 编写的（显然）。谢谢！

【问题讨论】：

您想在不刷新整个页面的情况下进行更新？
那么更新面板怎么样？
试过了，可视化在部分回发后消失了，尽管它的代码在那里。似乎 google 的 setOnLoadCallback 从不回调，如果我直接调用该函数，它就会消失。

标签： c# javascript jquery asp.net google-visualization

【解决方案1】：

Gviz 可以选择使用 JSON 数据填充图表，因此，您可以使用 jquery 轻松完成此操作，只需调用服务器以获取一组新数据，让它返回 JSON，然后将其传递给绘制图表的函数。

你的 jquery/javascript 看起来像这样：

    function drawMyChart(data) {
        // stuff to draw chart using the contents of data
        // data should be Gviz Data Table in JSON format
        // your server needs to output this
        var dt = new google.visualization.DataTable(data)
        // rest of your stuff, just like standard gviz
    }

    function makeAjaxCall() {
        $.ajax({
            url: '/path/to/data/json',
            sucess: drawMyChart(a),
            dataType: 'json' // this is important, have it interpreted as json
        });
    }
// html somewhere
<input type='button' onclick='makeAjaxCall()'>Go</input>

关于正确格式化您的 JSON 响应，有几个库可以帮助您，尽管我不知道您提到的语言中的任何具体内容。例如，python 中的一个。

如果您遇到困难，可以将所有条目转储到一个数组中，如下所示：

  [[name, age],[john, 25],[paul, 20]]

当它从您的服务器返回时，使用 google.visualization.arrayToDataTable 将其解释为 JSON。

希望对您有所帮助。

【讨论】：