2

私はちょうどGoogleチャートとその本当にクールなものを使い始めました. 唯一の問題は、SQL サーバー ビューから供給されたデータを使用してこれを実装するための良い例が見つからないことです。だから私はこの機能を容易にするためにサンプルプロジェクトを作成しましたが、それを機能させるために戦っています. 以下の私のコードを見つけてください：

<script type="text/javascript">
        // Load the Visualization API and the piechart package.
        google.load('visualization', '1', { 'packages': ['corechart'] });

        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(drawChart);

        function drawChart() {
            var jsonData = $.ajax({
                url: "api/Google",
                dataType: "json",
                async: false
            }).responseText;

            alert(jsonData);
            // Create our data table out of JSON data loaded from server.
            var data = new google.visualization.DataTable(jsonData);

            data.addColumn('string', 'Employee');
            data.addColumn('number', 'TotalNoOfReports');

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            chart.draw(data, { width: 400, height: 240 });
        }

    </script>

正しい json データ文字列を取得していますが、jsonData を DataTable() クラスに渡すと、グラフのデータが返されません。また、data.AddRows(jsonData) を呼び出そうとしましたが、まだ運がありません。Google は通常の json データの構造を理解しておらず、次の形式である必要があると推測しています。

{"cols":[{"id":"Col1","label":"","type":"date"}],
  "rows":[
    {"c":[{"v":"a"},{"v":"Date(2010,10,6)"}]},
    {"c":[{"v":"b"},{"v":"Date(2010,10,7)"}]}
  ]
}

jsonData を上記の構造のように見えるようにする方法はありますか、おそらくもっと一般的なものです。唯一のグラフの例は静的であり、データベースから読み取る必要がある場合があります。助けてください。

4

3 に答える 3

3

この件に関して私の知識は非常に限られていますが、最初に json データを読み取り可能なものに変換してから、ループを実行して行を追加するとどうなるでしょうか? 何かのようなもの：

var jsondata = eval ("(" + JSONObject + ")");

その後

for(var key in jsondata) {

    data.addRows (row);

私はそれが非常に限られた短い答えであることを知っていますが、他の誰かがより良い解決策を持っているかもしれません.

于 2012-10-12T14:56:03.033 に答える
1

レスポンスの形式は少し異なります。dataTable 部分のみを貼り付けましたが、ステータス コード、リクエスト ID、API バージョンも含まれています。

{version:'0.6',reqId:'0',status:'ok',sig:'5982206968295329967',table:{cols:[{id:'Col1',label:'',type:'number'},{id:'Col2',label:'',type:'number'},{id:'Col3',label:'',type:'number'}],rows:[{c:[{v:1.0,f:'1'},{v:2.0,f:'2'},{v:3.0,f:'3'}]},{c:[{v:2.0,f:'2'},{v:3.0,f:'3'},{v:4.0,f:'4'}]},{c:[{v:3.0,f:'3'},{v:4.0,f:'4'},{v:5.0,f:'5'}]},{c:[{v:1.0,f:'1'},{v:2.0,f:'2'},{v:3.0,f:'3'}]}]}};

ここで詳細を読むことができます：

https://developers.google.com/chart/interactive/docs/dev/implementing_data_source

于 2012-11-20T08:21:42.030 に答える