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

Posted 2023-04-12

【中文标题】错误：第一行不是数组。谷歌饼图

【英文标题】：Error: First row is not an array. Google Pie Chart

【发布时间】：2018-09-30 08:20:57

【问题描述】：

我正在尝试使用 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);

【参考方案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 已被弃用

【讨论】：

我怎样才能使这个异步？