以下是使用Google API创建柱形图的Jquery Ajax代码。
$(document).ready(function () {
//load Data Here
var chartData = null;
$.ajax({
url: '/Dashboard/GetData',
type: 'GET',
dataType: 'json',
data: '',
success: function (d) {
chartData = d;
},
error: function () {
alert('Error!');
}
}).done(function () {
google.charts.load("current", { packages: ['corechart'] });
drawChart(chartData);
}).fail(function () {
alert("Sorry. Server unavailable. ");
});
});`
function drawChart(d) {
var charData = d;
var data = null;
data = google.visualization.arrayToDataTable(charData);
var view = new google.visualization.DataView(data);
view.setColumns([0, {
type: 'number',
label: data.getColumnLabel(0),
calc: function () { return 0; }
}, {
type: 'number',
label: data.getColumnLabel(1),
calc: function () { return 0; }
}, {
type: 'number',
label: data.getColumnLabel(2),
calc: function () { return 0; }
}, {
type: 'number',
label: data.getColumnLabel(3),
calc: function () { return 0; }
}
]);
var options = {
title: 'Bodily Analysis',
legend: 'bottom',
hAxis: {
title: 'Year',
format: '#'
},
vAxis: {
minValue: 0,
maxValue: 1000,
title: 'Measurements'
},
chartArea: {
left: 100,
top: 50,
width: '70%',
height: '50%'
},
animation: {
duration: 1000
}
};
alert(data);
var chart = new google.visualiztion.ColumnChart(document.getElementById('visualization'));
alert(data);
var runFirstTime = google.visualization.events.addListener(chart, 'ready', function () {
google.visualization.events.removeListener(runFirstTime);
chart.draw(data, options);
});
chart.draw(view, options);
}
这是我的MVC控制器,它以JSON的形式从数据库返回数据。
public JsonResult GetData()
{
List<BusinessContact> Bc = new List<BusinessContact>();
using (BusinessContContext db = new BusinessContContext())
{
Bc = db.BusinessContacts.OrderBy(a => a.birthDate).ToList();
}
var charData = new object[Bc.Count + 1];
charData[0] = new object[]
{
"Birth",
"height",
"ChestMeasurement",
"Weight"
};
int j = 0;
foreach (var i in Bc)
{
j++;
charData[j] = new object[]
{
Convert.ToDateTime(i.birthDate).Year,
Convert.ToUInt32(i.height),
Convert.ToUInt32(i.ChestMeasurement),
Convert.ToUInt32(i.Weight)
};
}
return new JsonResult{Data = charData, JsonRequestBehavior = JsonRequestBehavior.AllowGet};
}
我遇到的问题是,在从数据库获取JsonResult后,图表不会呈现。我注意到
之后没有提示警告 var chart = new google.visualiztion.ColumnChart(document.getElementById('visualization'));
我需要帮助。