使用 google 图表 api 的可点击条形图标签
clickable bar chart lebels using google chart api
我正在使用 google 图表 api 在仪表板上创建条形图。当我使用 api 创建条形图时,它会为我创建漂亮的条形图,但根据我的要求,我需要图片中提到的条形标签值的超链接。
function drawStackedChart(reqCategoryId,fcategoryName)
{
$.ajax({
url: "http://localhost:8080/TheSanshaWorld/sfcms/fetch-complaint-result-for-other-category?categoryId="+reqCategoryId,
datatype: "json",
success : function(jsonData)
{
var data = new google.visualization.DataTable();
// Add columns
data.addColumn('string','categoryName');
data.addColumn({type: 'number',role: 'interval'});
var complaintStatus = jsonData[0].complaintStatus;
for(var i=0;i<complaintStatus.length;i++)
{
data.addColumn('number',complaintStatus[i].statusName);
data.addColumn({type: 'number',role: 'scope'});
}
data.addRows(jsonData.length);
var maxVal=jsonData[0].totalCountComplaint;
for(i=0;i<jsonData.length;i++)
{
// trying to create hyperlink
data.setCell(i,0,'<a href="next.html">+jsonData[i].categoryName+</a>');
data.setCell(i,1,jsonData[i].categoryId);
for(j=0; j< jsonData[i].complaintStatus.length; j++)
{
data.setCell(i,parseInt(jsonData[i].complaintStatus[j].statusId)*2, jsonData[i].complaintStatus[j].countComplaint);
data.setCell(i,parseInt(jsonData[i].complaintStatus[j].statusId)*2+1, jsonData[i].complaintStatus[j].statusId);
}
if(jsonData[i].totalCountComplaint>maxVal)
maxVal=jsonData[i].totalCountComplaint;
}
var options = {
title : fcategoryName+' Complaints Dashboard',
titleTextStyle : {
fontName : 'Arial',
fontSize : 18,
bold : true,
},
isStacked:true,
chartArea: {width:'50%',height:'75%'},
bar: {groupWidth: '50%'},
tooltip : {
isHtml : true,
textStyle : {
fontName : 'sans-serif',
fontSize : 14,
bold : false
}
},
hAxis:{
title:'status values',
gridlines : {
count : maxVal+1
},
baseline:maxVal,//static
},
vAxis:{
title:'Complaint\'s categories',
textStyle : {
fontName : 'sans-serif',
fontSize : 18,
bold : false,
},
},
};
var chart = new google.visualization.BarChart(document.getElementById('donutchart'));
chart.draw(data, options);
new google.visualization.events.addListener(chart, 'select', selectionHandler);
function selectionHandler() {
// code for selection handler
}
我通过添加点击事件并获得目标 ID 解决了这个问题。
而target id包含了点击事件的所有信息,所以使用这个target id我们可以很容易的找出点击信息。
代码:
var handler = function(e) {
console.log(e);
var parts = e.targetID.split('#');
console.log(parts);
if(parts[0]=="vAxis")
{
if (parts.indexOf('label') >= 0) {
var idx = parts[parts.indexOf('label') + 1];
$(document).ready(function() {$('#prev').show();});
categoryName=data.getValue(parseInt(idx),0);
c=categoryId=data.getValue(parseInt(idx),1);
}
}
else if(parts[0]=="legendentry")
{
//alert(parts[1]);
var op=parseInt(parts[1]);
optionBase(op);
chart.setSelection([]);
}
else if(parts[0]=="bar")
{
categoryName=data.getValue(parseInt(parts[2]),0);
categoryId=data.getValue(parseInt(parts[2]),1);
statusId=data.getValue(parseInt(parts[2]),2);
chart.setSelection([]);
}
};
google.visualization.events.addListener(chart, 'click', handler);
我正在使用 google 图表 api 在仪表板上创建条形图。当我使用 api 创建条形图时,它会为我创建漂亮的条形图,但根据我的要求,我需要图片中提到的条形标签值的超链接。
function drawStackedChart(reqCategoryId,fcategoryName)
{
$.ajax({
url: "http://localhost:8080/TheSanshaWorld/sfcms/fetch-complaint-result-for-other-category?categoryId="+reqCategoryId,
datatype: "json",
success : function(jsonData)
{
var data = new google.visualization.DataTable();
// Add columns
data.addColumn('string','categoryName');
data.addColumn({type: 'number',role: 'interval'});
var complaintStatus = jsonData[0].complaintStatus;
for(var i=0;i<complaintStatus.length;i++)
{
data.addColumn('number',complaintStatus[i].statusName);
data.addColumn({type: 'number',role: 'scope'});
}
data.addRows(jsonData.length);
var maxVal=jsonData[0].totalCountComplaint;
for(i=0;i<jsonData.length;i++)
{
// trying to create hyperlink
data.setCell(i,0,'<a href="next.html">+jsonData[i].categoryName+</a>');
data.setCell(i,1,jsonData[i].categoryId);
for(j=0; j< jsonData[i].complaintStatus.length; j++)
{
data.setCell(i,parseInt(jsonData[i].complaintStatus[j].statusId)*2, jsonData[i].complaintStatus[j].countComplaint);
data.setCell(i,parseInt(jsonData[i].complaintStatus[j].statusId)*2+1, jsonData[i].complaintStatus[j].statusId);
}
if(jsonData[i].totalCountComplaint>maxVal)
maxVal=jsonData[i].totalCountComplaint;
}
var options = {
title : fcategoryName+' Complaints Dashboard',
titleTextStyle : {
fontName : 'Arial',
fontSize : 18,
bold : true,
},
isStacked:true,
chartArea: {width:'50%',height:'75%'},
bar: {groupWidth: '50%'},
tooltip : {
isHtml : true,
textStyle : {
fontName : 'sans-serif',
fontSize : 14,
bold : false
}
},
hAxis:{
title:'status values',
gridlines : {
count : maxVal+1
},
baseline:maxVal,//static
},
vAxis:{
title:'Complaint\'s categories',
textStyle : {
fontName : 'sans-serif',
fontSize : 18,
bold : false,
},
},
};
var chart = new google.visualization.BarChart(document.getElementById('donutchart'));
chart.draw(data, options);
new google.visualization.events.addListener(chart, 'select', selectionHandler);
function selectionHandler() {
// code for selection handler
}
我通过添加点击事件并获得目标 ID 解决了这个问题。 而target id包含了点击事件的所有信息,所以使用这个target id我们可以很容易的找出点击信息。 代码:
var handler = function(e) {
console.log(e);
var parts = e.targetID.split('#');
console.log(parts);
if(parts[0]=="vAxis")
{
if (parts.indexOf('label') >= 0) {
var idx = parts[parts.indexOf('label') + 1];
$(document).ready(function() {$('#prev').show();});
categoryName=data.getValue(parseInt(idx),0);
c=categoryId=data.getValue(parseInt(idx),1);
}
}
else if(parts[0]=="legendentry")
{
//alert(parts[1]);
var op=parseInt(parts[1]);
optionBase(op);
chart.setSelection([]);
}
else if(parts[0]=="bar")
{
categoryName=data.getValue(parseInt(parts[2]),0);
categoryId=data.getValue(parseInt(parts[2]),1);
statusId=data.getValue(parseInt(parts[2]),2);
chart.setSelection([]);
}
};
google.visualization.events.addListener(chart, 'click', handler);