0

私はアプリケーションを開発しています.CSV形式のデータがあり、Google Visualization 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、 を使用しDataViewて一部の列のみを表示できます。追加の列を表示する場合、最も簡単な方法は、新しい を作成しDataViewてグラフを再描画することです。
  2. データがわからず、新しいデータを取得するためにサーバーに 2 回目の呼び出しを行う必要がある場合は、データが返されたらDataTable、addColumn関数を使用setCellして新しいデータを に追加し、すべてのアイテムに使用できます。draw次に、もう一度チャートを呼び出します。addColumn(これを簡単にするために、配列を受け入れるように機能要求を提出しました。)

ちなみに、CSV ファイルを で直接受け入れる機能のリクエストも提出しましたDataTable。明らかに、これらの機能要求のいずれかがいつ行われるか、いつ行われるかについては約束しません。

于 2013-07-19T13:05:31.007 に答える