我有一个像下面这样的 json 响应,
[
{
"Value":"80,120"
},
{
"value2":"117,120"
},
{
"value3":"105,111"
},
{
"value4":"40,77"
},
{
"value5":"27,44"
}
]
如何将这个json结构形成一个表格来动态绘制条形图?现在我在这里静态提及这些值。
function drawChart() {
var data = google.visualization.arrayToDataTable([
['value', '80', '120'],
['value1', '70', '300'],
['value2', '90', '400'],
['value3', '100', '230']
]);
最佳答案
如果您打算使用该数据绘制谷歌图表,
您需要将值从字符串转换为数字。
来自...
['value', '80', '120'],
到...
['value', 80, 120],
否则,您将收到以下错误...
轴 #0 的数据列不能是字符串类型
您可以使用 map
方法,如其他答案中的建议,
使用 parseFloat
或 parseInt
将字符串转换为数字。
以下内容将起作用...
var dataObj = [
{
"Value":"80,120"
},
{
"value2":"117,120"
},
{
"value3":"105,111"
},
{
"value4":"40,77"
},
{
"value5":"27,44"
}
];
var dataArray = dataObj.map(function (row) {
var keys = Object.keys(row);
var values = row[keys[0]].split(',');
return [keys[0], parseFloat(values[0]), parseFloat(values[1])];
});
console.log(JSON.stringify(dataArray));
此外,由于数组数据不包含列标题,
您需要使用 true
作为 arrayToDataTable
中的“第一行是数据”参数,
这是第二个参数...
var data = google.visualization.arrayToDataTable(dataArray, true);
以下是使用谷歌图表的工作示例...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var dataObj = [
{
"Value":"80,120"
},
{
"value2":"117,120"
},
{
"value3":"105,111"
},
{
"value4":"40,77"
},
{
"value5":"27,44"
}
];
var dataArray = dataObj.map(function (row) {
var keys = Object.keys(row);
var values = row[keys[0]].split(',');
return [keys[0], parseFloat(values[0]), parseFloat(values[1])];
});
var data = google.visualization.arrayToDataTable(dataArray, true);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
关于javascript - 如何将 JSON 结构转换为数组的数组?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52272722/