Google图表堆积栏的JSON格式 [英] JSON format for Google chart stacked column

问题描述

我有如下数据:

           store 1   Store 2
store_id   walk-ins  walk-ins
morning      20        25
noon         35        40
night        50        55

有20家商店可以绘制图表以堆积每行的值.

There are 20 stores to chart stacking the values of each row.

Google图表文档告诉我数据数组如下:

Google Charts docs tells me the data array looks like this:

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)返回如下；

I am getting the data via MySQL script / server PHP script. What should the JSON look like? The json_encode($data) from MySQL query returns as follows;

[{"store_name":"Store 1"，"Time":"Morning"，"count":"17"}，...]

[{"store_name":"Store 1","Time":"Morning","count":"17"}, ...]

，但图表未加载，并给我一条消息"Table has no columns".

but the chart does not load and gives me a message "Table has no columns".

我按如下方式加载JSON:

I load JSON as follows:

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的结构是什么?

What is the structure of the JSON for a stacked column chart?

谢谢！

推荐答案

事实证明，映射数据确实是一项非常复杂的任务.

It turned out that mapping of your data happened to be a quite complex task.

例如，您具有以下json数据:

For example, you have this json data:

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 用于以下代码.可以这样包含它:

I use underscore.js for the following code. It can be included like this:

<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]]

这里是指向 jsFiddle与您的图表的链接.

这篇关于Google图表堆积栏的JSON格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！