Google餅圖中的綁定事件

我有一個由Google Chart API生成的餅圖。圖表的代碼都如下Google餅圖中的綁定事件

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點擊並且與圖表中的其他餅圖相同。

感謝您的回覆

來源

2013-01-08 ArrayOutOfBound

我想你可以看看這個[問題] [1]可能重複。 [1]：http://stackoverflow.com/questions/11473177/how-to-add-link-to-a-part-google-pie-chart/11480387#11480387 –

非常感謝你 – ArrayOutOfBound

我有小疑問。它們如何在javascript中的函數中添加函數。selectHandler（）在drawChart（）內。 – ArrayOutOfBound

我添加了下面的代碼，現在它的工作正常。

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);

來源

2013-01-08 06:46:42 ArrayOutOfBound

查看關於Binding Events in google pie chart的鏈接。

<!--Div that will hold the pie chart--> 
    <div id="chart_div" style="width:400; height:300"></div> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script> 
    // Load the Visualization API and the piechart package. 
    google.load('visualization', '1.0', {'packages':['corechart']}); 

    // Set a callback to run when the Google Visualization API is loaded. 
    google.setOnLoadCallback(drawChart); 

    // Callback that creates and populates a data table, 
    // instantiates the pie chart, passes in the data and 
    // draws it. 
    function drawChart() { 

    // Create the data table. 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Topping'); 
    data.addColumn('number', 'Slices'); 
    data.addRows([ 
     ['Mushrooms', 3], 
     ['Onions', 1], 
     ['Olives', 1], 
     ['Zucchini', 1], 
     ['Pepperoni', 2] 
    ]); 

    // Set chart options 
    var options = {'title':'How Much Pizza I Ate Last Night', 
        'width':400, 
        'height':300}; 

    // Instantiate and draw our chart, passing in some options. 
    var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 

    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); 
    } </script>

來源

2015-10-08 06:25:34

Google餅圖中的綁定事件

回答

相關問題