無法點擊標籤上的谷歌圖表API

我是新來的JavaScript，我使用谷歌圖表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 
    }

來源

2016-01-16 tushar balar

可以使用的'click'event的targetID發現被點擊

點擊y軸的標籤，當標籤時，targetID將舉行類似的值以下...

vAxis#0#label#0

你可以使用字符串方法split，在數據

selection = e.targetID.split('#');

找到標籤值時的第一個值= vAxis，這意味着y軸標籤被點擊

if (selection[0].indexOf('vAxis') > -1) {

的第一個整數表示y軸，在這個例子中，只有一個

第二個整數是指該行的數據

來獲取值點擊...

data.getValue(rowIndex, colIndex);

例如

data.getValue(parseInt(selection[selection.length - 1]), parseInt(selection[1])));

看到下面的工作片段...

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages:['corechart'] 
 
}); 
 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Element', 'Density', { role: 'style' } ], 
 
    ['Copper', 8.94, '#b87333'], 
 
    ['Silver', 10.49, 'silver'], 
 
    ['Gold', 19.30, 'gold'], 
 
    ['Platinum', 21.45, 'color: #e5e4e2'] 
 
    ]); 
 

 
    var options = { 
 
    title: 'Density of Precious Metals, in g/cm^3', 
 
    width: 600, 
 
    height: 400, 
 
    bar: {groupWidth: '95%'}, 
 
    legend: { position: 'none' }, 
 
    }; 
 

 
    var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
 
    google.visualization.events.addListener(chart, 'click', function(e) { 
 
    var selection; 
 
    if (e.targetID) { 
 
     selection = e.targetID.split('#'); 
 
     if (selection[0].indexOf('vAxis') > -1) { 
 
     console.log('label clicked = ' + data.getValue(parseInt(selection[selection.length - 1]), parseInt(selection[1]))); 
 
     } 
 
    } 
 
    }); 
 
    chart.draw(data, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

來源

2017-03-14 01:01:07 WhiteHat

無法點擊標籤上的谷歌圖表API

回答

相關問題