我正在尝试使用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);
}
答案 0 :(得分:2)
看起来你正在尝试使用字符串构建数组,
只需使用一个实际的数组...
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