尝试用这种(缩短的)格式将我的第一个谷歌折线图与JSON api数据放在一起:
{"Battery Voltage, (V)":{"2017-10-09T00:00:00.000Z":12.5,"2017-10-09T00:01:00.000Z":12.44,"2017-10-09T00:02:00.000Z":12.43}}
据我所知,它必须采用以下格式:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Datetime', 'Battery Voltage, (V)'],
['2017-10-09T00:00:00.000Z', 12.50],
['2017-10-09T00:01:00.000Z', 12.44],
['2017-10-09T00:02:00.000Z', 12.43],
]);
var options = {
title: 'Battery Voltage',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
我的问题是:如何将我的json数据转换成正确的格式?即:
{
"cols":[
{"label":"Datetime","type":"datetime"},
{"label":"Battery Voltage, (V)","type":"number"},
],
"rows":[{"c":[{"v":"2017-10-09T00:00:00.000Z"}{"v":12.50}
{"c":[{"v":"2017-10-09T00:00:00.000Z"}{"v":12.50}
]
}
答案 0 :(得分:0)
使用javascript,您可以使用以下代码段转换json ...
var chartData = [];
Object.keys(jsonData).forEach(function (column) {
chartData.push(['Datetime', column]);
Object.keys(jsonData[column]).forEach(function (dateValue) {
chartData.push([new Date(dateValue), jsonData[column][dateValue]]);
});
});
以上将创建一个数组如下......
[
["Datetime","Battery Voltage, (V)"],
["2017-10-09T00:00:00.000Z",12.5],
["2017-10-09T00:01:00.000Z",12.44],
["2017-10-09T00:02:00.000Z",12.43]
]
然后可以与静态方法一起使用 - &gt; arrayToDataTable
创建数据表
var data = google.visualization.arrayToDataTable(chartData);
请参阅以下工作代码段...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var jsonData = {"Battery Voltage, (V)":{"2017-10-09T00:00:00.000Z":12.5,"2017-10-09T00:01:00.000Z":12.44,"2017-10-09T00:02:00.000Z":12.43}};
var chartData = [];
Object.keys(jsonData).forEach(function (column) {
chartData.push(['Datetime', column]);
Object.keys(jsonData[column]).forEach(function (dateValue) {
chartData.push([new Date(dateValue), jsonData[column][dateValue]]);
});
});
var data = google.visualization.arrayToDataTable(chartData);
var options = {
chartArea: {
bottom: 48
},
title: 'Battery Voltage',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
});
&#13;
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart"></div>
&#13;