javascript - Google Charts JSON 结构 - 什么是不正确的

Question

感谢对此的任何帮助。

我正在从我的服务器提供 JSON，但数据没有显示在我的表格上。没有 javascript 错误，表明我的 JSON 存在问题(在 JS 函数中使用示例数据有效...)。

这是 JSON；

    {
        "cols": [
            {"label": "month","type": "string"},
            {"label": "date","type": "date"},
            {"label": "amount","type": "number"},
            {"label": "extype","type": "string"},
            {"label": "claimed","type": "boolean"}
        ],
        "rows": [
            {"c":["2016-10","2016-10-01",{"v":38.09,"f":"$38.09"},"Dinner",true]},
            {"c":["2016-10","2016-10-02",{"v":30.07,"f":"$30.07"},"Lunch",true]},
            {"c":["2016-10","2016-10-03",{"v":44.7,"f":"$44.7"},"Dinner",true]}
        ]
    }

这是我用来呈现表格的 javascript 函数。上面的 JSON 作为 dataset

传递给函数

    function drawTable(dataset,options){
        'use strict';
        var data = new google.visualization.DataTable(dataset);
        var cssClassNames = {
            'tableRow': '',
            'hoverTableRow': '',
            'headerCell': 'd',
            'tableCell': ''};
        options.cssClassNames = cssClassNames;
        var table = new google.visualization.Table(document.getElementById('tableChart'));
        table.draw(data, options);
    }

这是渲染的输出(注意仅显示数量)；

Answer 1

首先，每列应该使用对象表示法定义，类似于金额列

{"c":[{"v":"2016-10"},{"v":"Date(2016, 9, 1)"},{"v":38.09,"f":"$38.09"},{"v":"Dinner"},{"v":true}]}

接下来，为了使第二列成为实际日期，需要更改格式...

来自 --> “2016-10-01”

至 --> “日期(2016, 9, 1)”

注意:使用此方法，月份是从零开始的(9 = 十月)

请参阅以下工作片段...

google.charts.load('current', {
  callback: function () {
    var jsonData = {
      "cols": [
        {"label": "month","type": "string"},
        {"label": "date","type": "date"},
        {"label": "amount","type": "number"},
        {"label": "extype","type": "string"},
        {"label": "claimed","type": "boolean"}
      ],
      "rows": [
        {"c":[{"v":"2016-10"},{"v":"Date(2016, 9, 1)"},{"v":38.09,"f":"$38.09"},{"v":"Dinner"},{"v":true}]},
        {"c":[{"v":"2016-10"},{"v":"Date(2016, 9, 2)"},{"v":30.07,"f":"$30.07"},{"v":"Lunch"},{"v":true}]},
        {"c":[{"v":"2016-10"},{"v":"Date(2016, 9, 3)"},{"v":44.7,"f":"$44.7"},{"v":"Dinner"},{"v":true}]}
      ]
    };

    var data = new google.visualization.DataTable(jsonData);
    var table = new google.visualization.Table(document.getElementById('tableChart'));
    table.draw(data);
  },
  packages:['table']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="tableChart"></div>