目前為止,我們涵蓋的網頁數量足以涵蓋許多網頁,但您之前已在網頁中繪製了圖表。但如果您想擷取使用者的點擊,或需要操控已繪製的圖表的屬性或資料,您必須監聽圖表擲回的事件。
所有圖表都會擲回某種類型的事件。最常見者如下:
- Ready (已就緒):在頁面上繪製圖表且已可回應方法時擲回。如需要求圖表資訊,請監聽這個事件。
- 選取 - 使用者選取圖表中的部分時,通常按一下長條或圓餅圖區塊。
- error - 當圖表無法顯示傳入的資料時 (通常因為
DataTable
格式有誤)。 - onmouseover 和 onmouseout:分別在使用者將遊標懸停在特定圖表元素上時擲回。
事件監聽作業非常簡單;只要呼叫 google.visualization.events.addListener()
將要傳入圖表的處理常式、要擷取的事件名稱,以及事件擲回時要呼叫的處理常式名稱即可。您可以使用任何圖表控點呼叫此方法,即使您尚未呼叫 draw()
也沒問題。請注意,如果您希望系統先呼叫一次事件監聽器,再呼叫 google.visualization.events.addOneTimeListener()
,然後再移除本身。
下列程式碼片段說明如何註冊以擷取圖表的 select 事件:
load libraries... function drawChart() { prepare data... var chart = new google.visualization.PieChart(document.getElementById('chart_div')); // The select handler. Call the chart's getSelection() method function selectHandler() { var selectedItem = chart.getSelection()[0]; if (selectedItem) { var value = data.getValue(selectedItem.row, selectedItem.column); alert('The user selected ' + value); } } // Listen for the 'select' event, and call my function selectHandler() when // the user selects something on the chart. google.visualization.events.addListener(chart, 'select', selectHandler); draw the chart... }
以下是含有新選取事件監聽器的 Hello Charts 程式碼範例。親自體驗。
<html> <head> <!--Load the AJAX API--> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> // Load the Visualization API and the piechart package. google.charts.load('current', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.charts.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> </head> <body> <!--Div that will hold the pie chart--> <div id="chart_div" style="width:400; height:300"></div> </body> </html>
更多資訊