0

我正在开发一个应用程序，我有一些 CSV 格式的数据，我想使用 Google 可视化 API 在折线图中显示它们，我将带有 JSON 的数据发送到我的视图并将其显示到图表中：

<script type="text/javascript">
results = [];

google.load("jquery", "1.3.2");
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(function(){
    $.getJSON("http://localhost:8081/petclinic/users/7/campaigns/2/queries/4/analyze", function(data){
        for (var i = 1; i < data.length; i++) {
                data[i][1] =parseInt(data[i][1]);
        }

        var data = google.visualization.arrayToDataTable(data);
        var options = {
          title: 'Data Analysis'
        };

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

这可以正常工作，现在我想将其他数据添加到此图表中，例如，如果我单击一个按钮，则应使用新信息更新数据，并且应绘制另一个折线图以便能够比较它们。

这是一个示例：例如，在开始时，这是我的数据，如下所示：

            var data = google.visualization.arrayToDataTable([
                                                           ['Date', 'Obama'],
                                                           ['07/05/2004',  1000],
                                                           ['08/05/2004',  1170],
                                                           ['09/05/2004',  660],
                                                           ['10/05/2004',  1030],
                                                           ['11/05/2004',  1030],
                                                           ['12/05/2004',  1030],
                                                           ['13/05/2004',  1030],
                                                         ]);

然后我想像这样向这个图表添加其他数据：

            var data = google.visualization.arrayToDataTable([
                                                           ['Date', 'Obama', 'Romney'],
                                                           ['07/05/2004',  1000,      400],
                                                           ['08/05/2004',  1170,      460],
                                                           ['09/05/2004',  660,       1120],
                                                           ['10/05/2004',  1030,      540],
                                                           ['11/05/2004',  1030,      540],
                                                           ['12/05/2004',  1030,      540],
                                                           ['13/05/2004',  1030,      540],
                                                         ]);
4

1 回答 1

1

有几种方法可以做到这一点：

  1. 如果您在发送 CSV 数据的初始事务期间知道所有数据，则可以填充 中的所有数据DataTable，并使用 aDataView仅查看某些列。当您想要显示附加列时，最简单的方法是创建一个新的DataView，然后重新绘制图表。
  2. 如果您不知道数据，需要再次调用服务器获取新数据，一旦数据返回，您可以将新数据添加到DataTablewithaddColumn函数中，然后setCell用于每个项目。然后再次调用draw图表。（我已经提交了一个功能请求以addColumn接受一个数组以使这更容易。）

顺便说一句，我还提交了一个功能请求，以直接在DataTable. 显然，我不承诺何时/是否完成这些功能请求中的任何一个。

于 2013-07-19T13:05:31.007 回答