谷歌图表堆叠柱状图的JSON格式

Question

我有如下数据：

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

有20个商店需要绘制每行数值的堆叠图。

Google Charts文档告诉我数据数组应该像这样：

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"}, ...]

但是图表无法加载并显示“Table has no columns”消息。

我按以下方式加载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结构是什么？

谢谢！

- TheRealPapa

---

你应该使用map函数将你的JSON数组映射到数据表中，例如Json.map(function(item) { return ['morning', 10, 16, 28]; })。 - vortexwolf

还应阅读文档，了解如何使用 google.visualization.DataTable 构造函数：https://developers.google.com/chart/interactive/docs/reference - vortexwolf

Answer 1

我知道这是一个老帖子，但如果有人需要的话，以下是使用服务器代码中 Google 堆叠柱状图的 Jsondata 格式。

{
  "cols": [
    {
      "id": "",
      "label": "title",
      "pattern": "",
      "type": "string"
    },
    {
      "id": "",
      "label": "A",
      "pattern": "",
      "type": "number"
    },
    {
      "type": "string",
      "role": "annotation",
      "p": {
        "role": "annotation"
      }
    },
    {
      "id": "",
      "label": "B",
      "pattern": "",
      "type": "number"
    },
    {
      "type": "string",
      "role": "annotation",
      "p": {
        "role": "annotation"
      }
    },
    {
      "id": "",
      "label": "C",
      "pattern": "",
      "type": "number"
    },
    {
      "type": "string",
      "role": "annotation",
      "p": {
        "role": "annotation"
      }
    },
    {
      "id": "",
      "label": "D",
      "pattern": "",
      "type": "number"
    },
    {
      "type": "string",
      "role": "annotation",
      "p": {
        "role": "annotation"
      }
    }
  ],
  "rows": [
    {
      "c": [
        {
          "v": "Categories",
          "f": null
        },
        {
          "v": "10",
          "f": null
        },
        {
          "v": "10",
          "f": null
        },
        {
          "v": "20",
          "f": null
        },
        {
          "v": "20",
          "f": null
        },
        {
          "v": "30",
          "f": null
        },
        {
          "v": "30",
          "f": null
        },
        {
          "v": "50",
          "f": null
        },
        {
          "v": "50",
          "f": null
        }
      ]
    }
  ]
}

- Hardik4560

---

我可以知道“p”，“v”，“f”的全称吗？ - Aravindh Gopi

Answer 2

原来，对数据进行映射是一个相当复杂的任务。

例如，您拥有此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]]

这里有一个链接，指向jsFiddle上的您的图表。

- vortexwolf

---

虽然最好是从PHP格式化JSON，因为OP查询了数据库，但仍然不错。 - meda

嗨vortex，你太棒了！但我正在寻找按商店制作的数据图表，而不是按时间制作的。我会使用你的fiddle来实现这一点。非常感谢！ - TheRealPapa

@TheRealPapa，你想要做的是“矩阵转置”，这是一个简单的算法。或者你可以在我的代码中将所有的store_name替换为Time，同时将Time替换为store_name。 - vortexwolf

嗨@vortex，我已经这样做了，谢谢！你真的帮了大忙（两次！）。如果你想让它成为“帽子戏法”（澳大利亚的东西！），我在这里还有另一个问题。我现在正在尝试让google.visualization.Table工作！http://stackoverflow.com/questions/23168129/google-arraytodatatable-invalid-row-type-for-row-0。谢谢！！！ - TheRealPapa