錯誤：第一行不是數組。 Google餅圖

Question

我正在嘗試使用Google餅圖。 我正在通過API調用將數據提供給圖表。 我正在使用ASP.NET頁面進行這項工作。 以下是頁面的完整代碼。

"[{\"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]]

上面的字符串是自行格式化的，如果我將此靜態變量放入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]);
})

這就是你所需要的

---

請參閱以下工作片段...
（數據已在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使用async: false