google-visualization - 谷歌饼图中的绑定(bind)事件

Question

我有一个由 Google Chart API 生成的饼图。图表代码如下

google.load("visualization", "1", {packages:["corechart"]});      
google.setOnLoadCallback(drawChart1);     

function drawChart1() 
{
var data = google.visualization.arrayToDataTable([
        ['Location', 'Value'],
        ["Location A", 20 ],
        ["Location B", 32],
        ["Location C", 12],
        ["Location D", 20],
        ["Location E", 2],
        ["Location F", 20],
        ["Location H", 10]
        ]);

var options = {
    colors          : ['#00918c', '#d0c500','#945a94', '#84ac43', '#ea8c1c', '#006daf', '#c54d4d'],
        is3D            : 'false',
        isHTML          : 'false',
        height          : 200,
        width           : 285,
        backgroundColor : "transparent",
        chartArea       : {left:0,top:0,width:"100%",height:"100%"},                
        legend          : {position: 'right', alignment: "end"}
        };

var chart = new google.visualization.PieChart(document.getElementById('chart_div1'));
chart.draw(data, options);

}

图表链接如下

Click to see Chart

我想在他们点击任何饼图区域时捕获图表中的事件。

假设如果他们单击饼图中的位置 A 饼图，我想要一个函数，该函数将警报消息显示为 Location A Clicked 并且与图表中的其他饼图相同。

感谢回复

Answer 1

我添加了下面的代码，现在可以正常工作了。

var chart = new google.visualization.PieChart(document.getElementById('chart_div1'));

 function selectHandler() 
     {
   var selectedItem = chart.getSelection()[0];

       if (selectedItem) 
       {
         var topping = data.getValue(selectedItem.row, 0);
         alert('The user selected ' + topping);
       }
     } 


    google.visualization.events.addListener(chart, 'select', selectHandler);            
    chart.draw(data, options);