错误：第一行不是数组。谷歌饼图

Question

我正在尝试使用 Google 饼图。我正在通过我的 API 调用将数据提供给图表。我正在使用 ASP.NET Page 来完成这项工作。以下是页面的完整代码。

"[{\"AuditStatusId\":2,\"Number\":5},{\"AuditStatusId\":3,\"Number\":1}, 
{\"AuditStatusId\":19,\"Number\":1},{\"AuditStatusId\":23,\"Number\":27}, 
{\"AuditStatusId\":24,\"Number\":2},{\"AuditStatusId\":27,\"Number\":1}, 
{\"AuditStatusId\":31,\"Number\":1},{\"AuditStatusId\":38,\"Number\":1}]"

我的 API 正在返回上述数据。

我在每个循环中的以下代码中做一些工作，以将我的数据转换为数组。但这仍然不起作用。

[['Task', 'Hours per Day'], ['2', 5], ['3', 1], ['19', 1], ['23', 27], ['24', 2], ['27', 1], ['31', 1], ['38', 1]]

上面的这个字符串是由self格式化的，如果我把这个静态放在arrayToDataTable方法中，它可以工作，但是如果我在方法中给出变量名，我会得到错误"错误：第一行不是数组。”

<script type="text/javascript">
var data01 = "[['Task', 'Hours per Day']";
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

    $.ajax({
        type: 'GET',
        url: 'http://class.localtest.me/api/dashboard/chartdata',
        dataType: 'json',
        async: false,
        contentType: "application/json; charset=utf-8",
        data: {},
        success: function (result) {
            $.each(JSON.parse(result), function (data, value) {
                data01 = data01.concat(',[\'' + value.AuditStatusId + '\',' + value.Number + ']');
            })

            data01 = data01.concat(']');

        },
        error: function (xhr, status, error) {
            alert(error);
        }
    });

    //var data = new google.visualization.DataTable([['Task', 'Hours per Day'], ['2', 5], ['3', 1], ['19', 1], ['23', 27], ['24', 2], ['27', 1], ['31', 1], ['38', 1]]);
    var arr = $.makeArray(data01);
    console.log(arr);
    var data = new google.visualization.arrayToDataTable(arr);


    var options = {
        title: 'My Assessments'
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
}

Answer 1

看起来您正在尝试使用字符串构建数组，
只需使用一个实际的数组...

var data01 = [['Task', 'Hours per Day']];

$.each(result, function (data, value) {
    data01.push([value.AuditStatusId.toString(), value.Number]);
})

这就是你所需要的

---

请参阅以下工作 sn-p...
（数据已经硬编码在fail回调中，可以去掉）

var data01 = [['Task', 'Hours per Day']];
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

    $.ajax({
        type: 'GET',
        url: 'http://class.localtest.me/api/dashboard/chartdata',
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        data: {}
    }).done(function (result) {
        loadData(result);
    }).fail(function (jqXHR, textStatus, errorThrown) {
        var result = "[{\"AuditStatusId\":2,\"Number\":5},{\"AuditStatusId\":3,\"Number\":1}, {\"AuditStatusId\":19,\"Number\":1},{\"AuditStatusId\":23,\"Number\":27}, {\"AuditStatusId\":24,\"Number\":2},{\"AuditStatusId\":27,\"Number\":1}, {\"AuditStatusId\":31,\"Number\":1},{\"AuditStatusId\":38,\"Number\":1}]";
        loadData(JSON.parse(result));
    });

    function loadData(result) {
      $.each(result, function (data, value) {
          data01.push([value.AuditStatusId.toString(), value.Number]);
      })

      var data = new google.visualization.arrayToDataTable(data01);
      var options = {
          title: 'My Assessments'
      };

      var chart = new google.visualization.PieChart(document.getElementById('piechart'));
      chart.draw(data, options);
    }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart"></div>

注释：

1) async: false 已被弃用