使用google图表处理javascript对象
我正试图绘制一个基于以下JSON的谷歌可视化饼图。我遇到了一些问题,因为谷歌使用数字数据,而不仅仅是普通对象 例如,我想要一个基于用例的饼图。饼图将列出VDI、升级、演示,并显示其占总数的比例。请帮忙 下面是JSON示例 [{Id:0,处理时间:2012/01,批准人:zoo,POC:POC1,用例:VDI},{Id:0,处理时间:2012/02,批准人:zoo,POC:POC1,用例:Upgrade},{Id:0,处理时间:2012/03,批准人:zoo,POC:POC2,用例:DEMO},{Id:0,处理时间:2012/04,批准人:victor,POC:POC2,用例:DEMO},{Id:0,处理时间:2012/05,批准人:victor,POC3,用例:DEMO},{Id:0,处理时间:2012/06,批准人:victor,POC:POC3,用例:升级},{Id:0,处理时间:2012/05,批准人:tom,POC:POC3,用例:VDI},{Id:0,处理时间:2012/06,批准人:tom,POC:POC3,用例:升级}]使用google图表处理javascript对象,javascript,google-visualization,Javascript,Google Visualization,我正试图绘制一个基于以下JSON的谷歌可视化饼图。我遇到了一些问题,因为谷歌使用数字数据,而不仅仅是普通对象 例如,我想要一个基于用例的饼图。饼图将列出VDI、升级、演示,并显示其占总数的比例。请帮忙 下面是JSON示例 [{Id:0,处理时间:2012/01,批准人:zoo,POC:POC1,用例:VDI},{Id:0,处理时间:2012/02,批准人:zoo,POC:POC1,用例:Upgrade},{Id:0,处理时间:2012/03,批准人:zoo,POC:POC2,用例:DEMO},{
// Full source
google.setOnLoadCallback(drawChart);
function drawChart() {
$.get('/Home/GetData', {},
function (data) {
var tdata = new google.visualization.DataTable();
tdata.addColumn('string', 'UseCase');
tdata.addColumn('int', 'Count');
// Reservation based on UseCase
var ReservationByUseCase = [];
for (var i = 0; i < data.length; i++) {
var d = data[i];
// If not part of array.. Add it
if ($.inArray(d.UseCase, ReservationByUseCase) === -1)
{
var UseCaseValue = d.UseCase;
var UseCaseCountValue = 1;
ReservationByUseCase.push({ UseCase: UseCaseValue, UseCaseCount: UseCaseCountValue });
}
// If part of the array.. Increase count
if ($.inArray(d.UseCase, ReservationByUseCase) !== -1) {
var cUseCase = ReservationByUseCase[$.inArray(d.UseCase, ReservationByUseCase)];
cUseCase.UseCaseCount = cUseCase.UseCaseCount + 1;
ReservationByUseCase[$.inArray(d.UseCase, ReservationByUseCase)] = cUseCase
}
}
for (var i = 0; i < ReservationByUseCase.length; i++) {
tdata.addColumn(ReservationByUseCase[i].UseCaseValue, ReservationByUseCase[i].UseCaseCountValue)
alert(ReservationByUseCase[i].UseCaseValue);
alert(ReservationByUseCase[i].UseCaseCountValue);
}
var options = {
title: "Reservations"
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(tdata, options);
});
}
您只需循环浏览数据并将每个用例相加:
var ndata = {}
var data = [{"Id":0,"ProcessedTime":"2012/01","Approver":"zoo","POC":"POC1","UseCase":"VDI"},{"Id":0,"ProcessedTime":"2012/02","Approver":"zoo","POC":"POC1","UseCase":"Upgrade"},{"Id":0,"ProcessedTime":"2012/03","Approver":"zoo","POC":"POC2","UseCase":"DEMO"},{"Id":0,"ProcessedTime":"2012/04","Approver":"victor","POC":"POC2","UseCase":"DEMO"},{"Id":0,"ProcessedTime":"2012/05","Approver":"victor","POC":"POC3","UseCase":"VDI"},{"Id":0,"ProcessedTime":"2012/06","Approver":"victor","POC":"POC3","UseCase":"Upgrade"},{"Id":0,"ProcessedTime":"2012/05","Approver":"tom","POC":"POC3","UseCase":"VDI"},{"Id":0,"ProcessedTime":"2012/06","Approver":"tom","POC":"POC3","UseCase":"Upgrade"}];
for (i = 0; i < data.length; i++) {
var d = data[i];
if (ndata[d["UseCase"]] == null) {
ndata[d["UseCase"]] = 1
} else {
ndata[d["UseCase"]] = ndata[d["UseCase"]] + 1
}
}
console.log(ndata);
这里有一把小提琴:这就是我想到的……这有用吗
// Reservation based on UseCase
var ReservationByUseCase = [];
for (var i = 0; i < data.length; i++) {
var d = data[i];
// If not part of array.. Add it
if ($.inArray(d.UseCase, ReservationByUseCase) === -1)
{
var UseCaseValue = d.UseCase;
var UseCaseCountValue = 1;
ReservationByUseCase.push({ UseCase: UseCaseValue, UseCaseCount: UseCaseCountValue });
}
// If part of the array.. Increase count
if ($.inArray(d.UseCase, ReservationByUseCase) !== -1) {
var cUseCase = ReservationByUseCase[$.inArray(d.UseCase, ReservationByUseCase)];
cUseCase.UseCaseCount = cUseCase.UseCaseCount + 1;
ReservationByUseCase[$.inArray(d.UseCase, ReservationByUseCase)] = cUseCase
}
}
谢谢你的帮助!我想这已经接近解决我的问题了。这是你能以更可读的格式给我这一行的方式吗?我有C语言的经验,但对javascript不熟悉。ndata[d[UseCase]]=ndata[d[UseCase]]==null?1:ndata[d[UseCase]]+1;当然,它只是说:如果这是真的?分配这个:否则分配这个谢谢你重写上面的代码。这很有帮助。我确实对这行有疑问。这是在检查ndata数组中是否存在d.usecase吗?非常感谢。。我对这种语法不是很熟悉。我想我回到了第一步。我发布了完整的源代码。请帮助。