javascript - 无效的数据表格式:必须至少有 2 列
问题描述
我有一个类似的 JSON 字符串:
[
{
"Year":2018,
"Ov":1000,
"PD":2000,
"OL":3000
},
{
"Year":2017,
"Ov":4000,
"PD":5000,
"OL":6000
},
{
"Year":2012,
"Ov":600,
"PD":400,
"OL":200
},
{
"Year":2013,
"Ov":700,
"PD":500,
"OL":200
},
{
"Year":2014,
"Ov":700,
"PD":400,
"OL":300
},
{
"Year":2015,
"Ov":700,
"PD":300,
"OL":400
},
{
"Year":2016,
"Ov":500,
"PD":300,
"OL":200
},
{
"Year":2017,
"Ov":4000,
"PD":5000,
"OL":6000
},
{
"Year":2018,
"Ov":1000,
"PD":2000,
"OL":3000
}
]
我的 HTML 代码:
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
var array = @Html.Raw(Json.Encode(Proj.Dash.JsonString));
alert("JSON.stringify " + array);
var dataArr = array.data;
function drawChart() {
var dataArray = [['Year', 'Ov', 'PD', 'OL']];
for (var i in dataArr) {
dataArray.push([dataArr[i].Year,dataArr[i].Ov,dataArr[i].PD,dataArr[i].OL]);
}
alert(dataArray.length);
var data = google.visualization.arrayToDataTable([dataArray
]);
var options = {
chart: {
title: '',
subtitle: '',
},
bars: 'vertical',
vAxis: { format: 'decimal' },
height: 500,
colors: ['#333333', '#3490e9', '#ff5a00'],
legend: {
position: 'none'
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
当我运行代码时,它返回 null 并出现此错误:
数据表格式无效:必须至少有 2 列。
我错过了什么?
任何建议都非常感谢。
解决方案
问题似乎来自这一行:
var dataArr = array.data;
您正在尝试访问data
在 JSON 字符串中找不到的属性,因此dataArr
返回undefined
并导致dataArray.length
返回 1,这会引发问题中提到的异常,因为传递给arrayToDataTable()
函数的数组中只存在列标题。
要正确传递数据,您需要使用JSON.parse()
使 JSON 字符串以数组形式返回:
var dataArr = JSON.parse(array);
这将生成包含列标题和值的数组,如下例所示:
[["Year", "Ov", "PD", "OL"],
[2018, 1000, 2000, 3000],
[2017, 4000, 5000, 6000],
[2012, 600, 400, 200],
[2013, 700, 500, 200],
[2014, 700, 400, 300],
[2015, 700, 300, 400],
[2016, 500, 300, 200],
[2017, 4000, 5000, 6000],
[2018, 1000, 2000, 3000]]
更新:
第二个问题是您正在定义[dataArray]
哪个实际创建嵌套数组,这导致wg
属性中的data
数组长度为零并且图表未正确显示,因此您应该删除外部数组方括号:
var data = google.visualization.arrayToDataTable(dataArray);
第三个问题是您正在复制数据组(即[2017, 4000, 5000, 6000]
在 2 个不同的系列中)。您应该使用自定义功能删除重复的部分。
因此,您的代码应类似于以下示例:
var array = @Html.Raw(Json.Encode(Proj.Dash.JsonString));
alert("JSON.stringify " + array);
var dataArr = JSON.parse(array);
function drawChart() {
var dataArray = [['Year', 'Ov', 'PD', 'OL']];
for (var i in dataArr) {
dataArray.push([dataArr[i].Year, dataArr[i].Ov, dataArr[i].PD, dataArr[i].OL]);
}
alert(dataArray.length);
var data = google.visualization.arrayToDataTable(dataArray);
var options = {
chart: {
title: '',
subtitle: '',
},
bars: 'vertical',
hAxis: { format: '#' }, // optional
vAxis: { format: 'decimal' },
height: 500,
colors: ['#333333', '#3490e9', '#ff5a00'],
legend: {
position: 'none'
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
工作示例:.NET Fiddle