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正在返回Above数据。

我在每个循环中的下面的代码中做了一些工作，将我的数据转换为数组。但这仍然无效。

[['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]);
})

这就是你所需要的一切

请参阅以下工作代码段...
（数据已经在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

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

1 个答案: