3

我正在开发一个使用 Google Charting API 的项目，我想使用 json 填充图表来构建数据表。

作为一项测试，我试图在尝试使用数据库中的动态数据之前构建一个简单的数组，但是我在获取正确格式的 json 时遇到了问题。

在谷歌文档中，它说 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]}

如果我尝试将其用于谷歌图表的数据集，我会收到以下消息

Cannot read property of '1' of undefined

我只是在构建一个简单的折线图，它只包含沿 x 轴的日期和沿 y 轴在该日期发生的次数的计数。

我如何构建数组以使其以正确的格式用于 google api 图表。

感谢您的任何帮助，您可以提供。

4

3 回答 3

7

您需要指定 cols 的参数类型。参考谷歌图表 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 回答