代码之家 › 专栏 › 技术社区 › Vijunav Vastivch

无效的数据表格式:必须至少有2列

asp.net-mvc json arrays c# javascript

Vijunav Vastivch · 技术社区 · 7 年前

我有一个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));
      }

当我运行代码时,它返回一个空值,并出现以下错误:

无效的数据表格式:必须至少有2列。

我错过了什么?

非常感谢您的任何建议。

2 回复 | 直到 7 年前

Tetsuya Yamamoto 7 年前

问题似乎来自这一行:

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 中的属性 数据 具有零长度数组,且图表未正确显示,因此应删除外部数组方括号:

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));
}

其他参考资料: arrayToDataTable() function

工作示例: .NET Fiddle

Amardeep Kumar Agrawal 7 年前

您是在同一个html文件中使用脚本,还是有单独的脚本文件。请澄清。如果它是一个单独的文件,请尝试用相同的html加载脚本。