无法点击谷歌图表API中的标签

Question

我是 javascript 新手，我正在使用 google 图表 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
    }

Answer 1

您可以使用

targetID

事件

的 'click' 来查找被单击的标签

当单击 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>

Answer 2

我也成功地用时间线图做到了这一点

//this must be called before draw otherwise it wont trigger
    google.visualization.events.addListener(chart, 'ready', myReadyHandler);

    chart.draw(data, options);

    function myReadyHandler(){
        $("text").click(function(event){
            var label = event.target;
            if ($(label).attr("text-anchor") == "end"){
                var text = $(label).html();
                console.log(text);
            }
        });
    }