Неверный формат таблицы данных: должен содержать не менее 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));
      }

Когда я запускаю код, он возвращает ноль с этой ошибкой:

Неверный формат таблицы данных: должен содержать не менее 2 столбцов.

Что я пропустил?

Любое предложение очень ценится.

Answer 1

Кажется, проблема возникает из этой строки:

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

Дополнительная ссылка: arrayToDataTable () function

Рабочий пример: .NET Fiddle

Answer 2

Используете ли вы сценарий в том же html-файле или есть отдельный файл сценария.Просьба уточнить.Если это отдельный файл, попробуйте загрузить ваш скрипт в том же html.