来自PHP文件的Google Chart数据

时间:2016-08-26 19:22:15

标签: javascript php jquery ajax google-visualization

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

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中记录时,我得到相同的输出。

然而,当我将此数据添加到Chart中时,我得到并且错误:

  

给定的每一行必须为null或数组。

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);

1 个答案:

答案 0 :(得分:1)

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

{"cols":[{"label":"Time of Day","type":"string"},{"label":"Emails","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 am'}, 1], [{v: [9, 0, 0], f: '9 am'}, 2], [{v: [10, 0, 0], f:'10 am'}, 3],...

你需要先解析最有可能是字符串的内容,
使用JSON.parse ...

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