3

私は Google Charting API を利用しているプロジェクトに取り組んでおり、json を使用してグラフにデータ テーブルを作成したいと考えています。

テストとして、データベースからの動的データを使用して試行する前に単純な配列を作成しようとしていますが、json を正しい形式で取得する際に問題が発生しています。

Google のドキュメントでは、json の内容は次のようになっていると書かれています。

{
  "cols": [
        {"id":"","label":"Topping","pattern":"","type":"string"},
        {"id":"","label":"Slices","pattern":"","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
        {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
      ]
}

json コードを返す関数を呼び出しています。

以下は、関数の呼び出し方法です

print json_encode(test());

テスト関数は

function test()
{
    $array = array();
    $array['cols'][] = "20-01-13";
    $array['cols'][] = "21-01-13";
    $array['cols'][] = "22-01-13";
    $array['rows'][] = 22;
    $array['rows'][] = 26;
    $array['rows'][] = 12;

    return $array;
}

グラフを生成する JavaScript は次のとおりです。

<script>
            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: "loadGraph.php",
                 dataType:"json",
                 async: false
                }).responseText;

                var data = new google.visualization.DataTable(jsonData);

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

jsonをエコーすると、次の形式で返されます

{"cols":["20-01-13","21-01-13","22-01-13"],"rows":[22,26,12]}

これをGoogleチャートのデータセットに使用しようとすると、次のメッセージが表示されます

Cannot read property of '1' of undefined

私は、x 軸に沿った日付と、y 軸に沿ったその日付に何かが発生した回数を含む単純な折れ線グラフのみを作成しています。

配列を作成して、Google API チャートの正しい形式にする方法を教えてください。

ご協力いただきありがとうございます。

4

3 に答える 3

7

colsのパラメータタイプを指定する必要があります。Google チャートの JSON 形式を参照してください

PHP コードは次のようになります。

function test()
{
    $array['cols'][] = array('type' => 'string');
    $array['cols'][] = array('type' => 'string');
    $array['cols'][] = array('type' => 'string');

    $array['rows'][] = array('c' => array( array('v'=>'20-01-13'), array('v'=>22)) );
    $array['rows'][] = array('c' => array( array('v'=>'21-01-13'), array('v'=>26)));
    $array['rows'][] = array('c' => array( array('v'=>'22-01-13'), array('v'=>12)));

    return $array;
}

print json_encode(test());

json コードは次のようになります。

{
  "cols": [
    {"type": "string"},
    {"type": "string"},
    {"type": "string"}
    ],
  "rows": [
    {"c":[{"v":"20-01-13"}, {"v":22} ]},
    {"c":[{"v":"21-01-13"}, {"v":26} ]},
    {"c":[{"v":"22-01-13"}, {"v":12} ]}
  ]
}
于 2013-06-24T21:41:40.043 に答える
2

これは少し遅れるかもしれませんが、とにかく、これが私のために働いたものです（棒グラフを作成するために必要でした）。

  1. 次のような配列を表す json 文字列を返すサーバー コードを取得します。

    [{
  "score": 12,
  "subject": "Computer Graphics"
}, {
  "score": 65,
  "subject": "Entreprenuership"
}, {
  "score": 82,
  "subject": "C++Programming"
}]

  2. eval()またはを使用して文字列を解析しJSON.parse()、JavaScript オブジェクトを取得します。

    var chartData = JSON.parse(jsonStringFromServer);

  3. 次のように DataTable オブジェクトを作成します。

    var dTable = new google.visualization.DataTable();

  4. dataTable に列を追加します。

    dTable.addColumn('string','Subject'); 
dTable.addColumn('number','Score'); 
//more columns if needed...

  5. JavaScript 配列 ( ) をループし、chartData配列内の各オブジェクトに対して、新しい行を に追加しますdataTable。

    for(i=0;i<chartData.length;i++){
    var currentObj = chartData[i];
    dTable.addRow([currentObj.subject,currentObj.score]);
}
//set options for the chart e.g title, width etc
// create the chart ...
于 2015-10-24T12:58:16.273 に答える
0

次のようになります。

array(10) {
  [0]=>
  array(2) {
    [0]=>
    string(2) "en"
    [1]=>
    int(104)
  }
  [1]=>
  array(2) {
    [0]=>
    string(0) ""
    [1]=>
    int(70)
  }
  [2]=>
  array(2) {
    [0]=>
    string(2) "zh"
    [1]=>
    int(13)
  }
  [3]=>
  array(2) {
    [0]=>
    string(2) "ru"
    [1]=>
    int(10)
  }
  ...

それから

var data = google.visualization.arrayToDataTable(<?php echo json_encode($our_array); ?>);

var chart = new google.visualization.PieChart(document.getElementById('someId'));
chart.draw(data, options);
于 2013-06-26T12:49:59.113 に答える