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

Question

我有一个类似的 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 列。

我错过了什么？

非常感谢任何建议。

Answer 1

问题似乎来自这一行：

var dataArr = array.data;

您正在尝试访问 JSON 字符串中未找到的 data 属性，因此 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]，它实际上创建了嵌套数组，这导致data 中的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

Answer 2

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