Google {c:[v: new ()]}在jsapi_compiled_default_module.js中的“jsapi_compiled_default_module.js”上失败

Question

Google文档指出，可以使用new Date() 作为值，并且可以从远程源加载数据.

文档：https://developers.google.com/chart/interactive/docs/reference#format-of-the-constructors-javascript-literal-data-parameter

参见'cols属性‘部分：'datetime’- JavaScript Date对象，包括时间。

示例值：v:new Date(2008, 0, 15, 14, 30, 45)

该示例还包含一个新的Date()值：{v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}

使用Google中的这个例子加载数据并填充图表： 示例

使用不带new Date的JSON文件可以很好地工作，并且图形被绘制为ok：

{
"cols": [
      {"id":"","label":"Topping","pattern":"","type":"string"},
      {"id":"","label":"Slices","pattern":"","type":"number"}
    ],
"rows": [
      {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
      {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
    ]
}

使用带有new Date的JSON文件将返回一个错误，即使它不是“JSON数据”。使用的数据：

{ cols: [
        {id: 'A', label: 'Datum', type: 'datetime'},
        {id: 'B', label: 'Watt', type: 'number'}
    ],
    rows: [
        {c:[{v: new Date(2021,10,28,19,01,00)},{ v: 2014 }]},{c:[{v: new Date(2021,10,28,19,02,00)},{ v: 1810 }]},{c:[{v: new Date(2021,10,28,19,03,00)},{ v: 1880 }]},{c:[{v: new Date(2021,10,28,19,04,00)},{ v: 1815 }]},{c:[{v: new Date(2021,10,28,19,05,00)},{ v: 1837 }]},{c:[{v: new Date(2021,10,28,19,06,00)},{ v: 1812 }]},{c:[{v: new Date(2021,10,28,19,07,00)},{ v: 1786 }]},{c:[{v: new Date(2021,10,28,19,08,00)},{ v: 1785 }]},{c:[{v: new Date(2021,10,28,19,09,00)},{ v: 1767 }]},{c:[{v: new Date(2021,10,28,19,10,00)},{ v: 1740 }]},{c:[{v: new Date(2021,10,28,19,11,00)},{ v: 1741 }]},{c:[{v: new Date(2021,10,28,19,12,00)},{ v: 1710 }]},{c:[{v: new Date(2021,10,28,19,13,00)},{ v: 1696 }]},{c:[{v: new Date(2021,10,28,19,14,00)},{ v: 1742 }]},{c:[{v: new Date(2021,10,28,19,15,00)},{ v: 1670 }]},{c:[{v: new Date(2021,10,28,19,16,00)},{ v: 1691 }]},{c:[{v: new Date(2021,10,28,19,17,00)},{ v: 1723 }]},{c:[{v: new Date(2021,10,28,19,18,00)},{ v: 1713 }]},{c:[{v: new Date(2021,10,28,19,19,00)},{ v: 1694 }]},{c:[{v: new Date(2021,10,28,19,20,00)},{ v: 1693 }]},{c:[{v: new Date(2021,10,28,19,21,00)},{ v: 1686 }]},{c:[{v: new Date(2021,10,28,19,22,00)},{ v: 1689 }]},{c:[{v: new Date(2021,10,28,19,23,00)},{ v: 1707 }]},{c:[{v: new Date(2021,10,28,19,24,00)},{ v: 1778 }]},{c:[{v: new Date(2021,10,28,19,25,00)},{ v: 1755 }]},{c:[{v: new Date(2021,10,28,19,26,00)},{ v: 1774 }]},{c:[{v: new Date(2021,10,28,19,27,00)},{ v: 1739 }]},{c:[{v: new Date(2021,10,28,19,28,00)},{ v: 1731 }]},{c:[{v: new Date(2021,10,28,19,29,00)},{ v: 1707 }]},{c:[{v: new Date(2021,10,28,19,30,00)},{ v: 1735 }]}
    ]
}

Chrome和Firefox中的错误：

Uncaught (in promise) SyntaxError: Unexpected token c in JSON at position 2
    at JSON.parse (<anonymous>)
    at gvjs_Li (jsapi_compiled_default_module.js:171)
    at new gvjs_M (jsapi_compiled_default_module.js:283)
    at (index):183

module.js中的第171行使用"JSON.parse(a)“解析方法，这是因为new Date()不是有效的json而失败。

我使用的javascript并不以JSON的形式加载数据：

getRAW("youless/?a=h").then(response => {
    console.log( response )
    var data = new google.visualization.DataTable(response);
    chart = new google.visualization.LineChart(document.getElementById('powerChartHour'));
    var options = {title: 'W00t'};
    chart.draw(data, options);
})

如果以JSON的形式加载它，就会得到相同的错误：

const getJSON = async url => {
    const response = await fetch(url, { method: 'GET' });
    if(!response.ok)
        throw new Error(response.statusText);
    const data = response.json();
    return data;
}

结论：文献不正确或不完整。或者我做错了什么(可能)。

Answer 1

见-> 使用日期字符串表示形式的日期和时间

基本上，如果要将JSON传递给数据表构造函数，

对于日期，只需将日期作为字符串传递，同时删除new关键字.

{ cols: [
        {id: "A", label: "Datum", type: "datetime"},
        {id: "B", label: "Watt", type: "number"}
    ],
    rows: [
        {c:[{v: "Date(2021,10,28,19,01,00)"},{ v: 2014 }]}
    ]
}

看下面的工作片段..。

​

google.charts.load('current', {
  packages: ['table']
}).then(function() {
  var data = new google.visualization.DataTable({
    cols: [{id: "A", label: "Datum", type: "datetime"},
      {id: "B", label: "Watt", type: "number"}
    ],
    rows: [
      {c: [{v: "Date(2021,10,28,19,01,00)"}, {v: 2014}]}
    ]
  });

  var table = new google.visualization.Table(document.getElementById('table_div'));
  table.draw(data);
});

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

​