我有如下数据:
store 1 Store 2
store_id walk-ins walk-ins
morning 20 25
noon 35 40
night 50 55
图表堆叠每行的值有20个商店.
谷歌图表文档告诉我数据数组如下所示:
var data = google.visualization.arrayToDataTable([
['Stores', 'Store 1', 'Store 2', 'Store 3', 'Store 4', ... ],
['morning', 10, 24, 20, 32, 18, 5, ...],
['noon', 16, 22, 23, 30, 16, 9, ...],
['night', 28, 19, 29, 30, 12, 13, ...],
]);
我通过Mysql脚本/服务器PHP脚本获取数据. JSON应该是什么样的? MySQL查询的json_encode($data)返回如下;
[{“store_name”:“Store 1”,“Time”:“Morning”,“count”:“17”},…]
但图表没有加载,并给我一条消息“表没有列”.
我按如下方式加载JSON:
var url = '/url/updatedata.PHP?var=querytype';
jQuery.getJSON( url, function(Json) {
// Create and populate the data table.
var data = new google.visualization.DataTable(Json);
....
堆积柱形图的JSON结构是什么?
谢谢!
解决方法:
事实证明,您的数据映射恰好是一项非常复杂的任务.
例如,你有这个json数据:
var json = [
{"store_name":"Store 1","Time":"Morning","count":"10"},
{"store_name":"Store 1","Time":"Noon","count":"16"},
{"store_name":"Store 1","Time":"Night","count":"28"},
{"store_name":"Store 2","Time":"Morning","count":"24"},
{"store_name":"Store 2","Time":"Noon","count":"22"},
{"store_name":"Store 2","Time":"Night","count":"19"}
];
我将underscore.js用于以下代码.它可以包括这样:
<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
映射代码:
var header = _.chain(json).pluck("store_name").sort().uniq(true).value();
header.unshift("Stores");
var rows = _.chain(json)
.groupBy(function(item) { return item.Time; })
.map(function(group, key) {
var result = [key];
_.each(group, function(item) {
result[_.indexOf(header, item.store_name)] = parseInt(item.count);
});
return result;
})
.value();
var jsonData = [header].concat(rows);
// draw chart
var data = google.visualization.arrayToDataTable(jsonData);
chart.draw(data, options);
最终的jsonData变量看起来如此:
[["Stores", "Store 1", "Store 2"],
["Morning", 10, 24],
["Noon", 16, 22],
["Night", 28, 19]]