Google 图表 {c:[v: new Date()]} 在 jsapi_compiled_default_module.js 的 "JSON.parse" 失败

Question

Google 图表文档指出 new Date() 可以用作一个值，您可以从远程源加载数据。
文档： https://developers.google.com/chart/interactive/docs/reference#format-of-the-constructors-javascript-literal-data-parameter
请参阅 'cols Property' 部分：'datetime' - JavaScript 包含时间的日期对象。
示例值：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 中的示例，我加载数据并填充图表： https://developers.google.com/chart/interactive/docs/php_example

使用不带 new Date 的 JSON 文件工作正常并且图表绘制正常：

{
"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 returns 的 JSON 文件会出错，即使它不是 'JSON data'。使用的数据：

{ 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

https://www.gstatic.com/charts/51/js/jsapi_compiled_default_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

参见 --> dates and times using the date string representation

基本上，如果您将 JSON 传递给数据 table 构造函数，
对于日期，只需将日期作为字符串传递，同时删除 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>

Google 图表 {c:[v: new Date()]} 在 jsapi_compiled_default_module.js 的 "JSON.parse" 失败

Google Charts {c:[v: new Date()]} fails on "JSON.parse" in jsapi_compiled_default_module.js

javascript

json

charts

google-visualization