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]实际上创建了嵌套数组，这导致wg中的data属性的长度为零，并且图表无法正确显示，因此您应该删除外部数组方括号：

var data = google.visualization.arrayToDataTable(dataArray);

第三个问题是您要复制数据组（即，[2017, 4000, 5000, 6000]是两个不同的系列）。您应该使用自定义功能删除重复的部分。

因此，您的代码应类似于以下示例：

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中。

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

2 个答案: