javascript - 来自 PHP 文件的 Google 图表数据

Question

我正在尝试生成这样的图表:

https://jsfiddle.net/x1rjLsav/

我的 PHP 文件返回数组如下:

Array
(
    [0] => [{v: [16, 0, 0], f: 04 PM}, 747]
    [1] => [{v: [17, 0, 0], f: 05 PM}, 614]
    [2] => [{v: [9, 0, 0], f: 09 AM}, 1080]
    [3] => [{v: [10, 0, 0], f: 10 AM}, 1472]
    [4] => [{v: [11, 0, 0], f: 11 AM}, 1191]
    [5] => [{v: [12, 0, 0], f: 12 PM}, 1142]
    [6] => [{v: [13, 0, 0], f: 01 PM}, 1156]
    [7] => [{v: [14, 0, 0], f: 02 PM}, 1331]
    [8] => [{v: [15, 0, 0], f: 03 PM}, 885]
    [9] => [{v: [18, 0, 0], f: 06 PM}, 503]
    [10] => [{v: [19, 0, 0], f: 07 PM}, 333]
    [11] => [{v: [20, 0, 0], f: 08 PM}, 206]
    [12] => [{v: [21, 0, 0], f: 09 PM}, 205]
    [13] => [{v: [22, 0, 0], f: 10 PM}, 185]
    [14] => [{v: [23, 0, 0], f: 11 PM}, 141]
    [15] => [{v: [24, 0, 0], f: 12 AM}, 105]
    [16] => [{v: [25, 0, 0], f: 12 AM}, 74]
    [17] => [{v: [26, 0, 0], f: 12 AM}, 58]
    [18] => [{v: [27, 0, 0], f: 12 AM}, 80]
    [19] => [{v: [4, 0, 0], f: 04 AM}, 87]
    [20] => [{v: [5, 0, 0], f: 05 AM}, 115]
    [21] => [{v: [6, 0, 0], f: 06 AM}, 102]
    [22] => [{v: [7, 0, 0], f: 07 AM}, 131]
    [23] => [{v: [8, 0, 0], f: 08 AM}, 604]
)

我将此数组存储在变量 jsonData 中并且，当我登录 console 时，我得到相同的输出。

但是，当我将此数据添加到图表中时，如下所示，我收到错误:

Every row given must be either null or an array.

var data = new google.visualization.DataTable();
  data.addColumn('string', 'Time of Day');
  data.addColumn('number', 'Emails');
  data.addRows([jsonData]);

我修改 PHP 文件并得到以下 JSON 输出

[["[{v: [16, 0, 0], f: 04 PM}, 747]"],["[{v: [17, 0, 0], f: 05 PM}, 614]"],["[{v: [9, 0, 0], f: 09 AM
}, 1080]"],["[{v: [10, 0, 0], f: 10 AM}, 1472]"],["[{v: [11, 0, 0], f: 11 AM}, 1191]"],["[{v: [12, 0
, 0], f: 12 PM}, 1142]"],["[{v: [13, 0, 0], f: 01 PM}, 1156]"],["[{v: [14, 0, 0], f: 02 PM}, 1331]"]
,["[{v: [15, 0, 0], f: 03 PM}, 885]"],["[{v: [18, 0, 0], f: 06 PM}, 503]"],["[{v: [19, 0, 0], f: 07 PM
}, 333]"],["[{v: [20, 0, 0], f: 08 PM}, 206]"],["[{v: [21, 0, 0], f: 09 PM}, 205]"],["[{v: [22, 0, 0
], f: 10 PM}, 185]"],["[{v: [23, 0, 0], f: 11 PM}, 141]"],["[{v: [24, 0, 0], f: 12 AM}, 105]"],["[{v
: [25, 0, 0], f: 12 AM}, 74]"],["[{v: [26, 0, 0], f: 12 AM}, 58]"],["[{v: [27, 0, 0], f: 12 AM}, 80]"
],["[{v: [4, 0, 0], f: 04 AM}, 87]"],["[{v: [5, 0, 0], f: 05 AM}, 115]"],["[{v: [6, 0, 0], f: 06 AM}
, 102]"],["[{v: [7, 0, 0], f: 07 AM}, 131]"],["[{v: [8, 0, 0], f: 08 AM}, 604]"]]

我按照如下方式修改JAVA脚本，它应该可以工作，但也不能工作。

var data = new google.visualization.DataTable();
  data.addColumn('string', 'Time of Day');
  data.addColumn('number', 'Emails Opens');
  data.addRows(jsonData);

Answer 1

如果您使用这种格式...

{"cols":[{"label":"时间","type":"string"},{"label":"电子邮件","type":"number"}] ,"r‌​ows":[{"c":[{"v":"16‌​"},{"f":"04 PM"},{"v":747}]},{"c":[{"v":"17"},{"f":"05 PM"}...

然后就可以直接创建数据表了...

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

具有以下格式...

[{v: [8, 0, 0], f: '上午 8 点'}, 1], [{v: [9, 0, 0], f: '上午 9 点'}, 2 ], [{v: [10, 0, 0], f:'上午 10 点'}, 3],...

您需要首先解析最有可能是字符串的内容，
使用 JSON.parse 转换为实际数组...

var data = new google.visualization.DataTable();
data.addColumn('string', 'Time of Day');
data.addColumn('number', 'Emails');
data.addRows(JSON.parse(jsonData));