Google Charts API中的事件監聽器

我正忙於在我的一個項目中使用Google Charts來在表中顯示數據。一切都很好。除了我需要查看用戶點擊按鈕後選擇的行。Google Charts API中的事件監聽器

這顯然是用JavaScript來完成的，但我一直在努力掙扎幾天，現在無濟於事。下面我粘貼了一個簡單的表格示例代碼，以及我想要使用的Javascript函數（這不起作用）。

<html> 
<head> 
<script type='text/javascript' src='https://www.google.com/jsapi'></script> 

<script type='text/javascript'> 
    google.load('visualization', '1', {packages:['table']}); 
    google.setOnLoadCallback(drawTable); 
    var table = ""; 

    function drawTable() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Name'); 
    data.addColumn('number', 'Salary'); 
    data.addColumn('boolean', 'Full Time Employee'); 
    data.addRows(4); 
    data.setCell(0, 0, 'Mike'); 
    data.setCell(0, 1, 10000, '$10,000'); 
    data.setCell(0, 2, true); 
    data.setCell(1, 0, 'Jim'); 
    data.setCell(1, 1, 8000, '$8,000'); 
    data.setCell(1, 2, false); 
    data.setCell(2, 0, 'Alice'); 
    data.setCell(2, 1, 12500, '$12,500'); 
    data.setCell(2, 2, true); 
    data.setCell(3, 0, 'Bob'); 
    data.setCell(3, 1, 7000, '$7,000'); 
    data.setCell(3, 2, true); 

    table = new google.visualization.Table(document.getElementById('table_div')); 
    table.draw(data, {showRowNumber: true}); 
    } 

    function selectionHandler() { 
     selectedData = table.getSelection(); 
     row = selectedData[0].row; 
     item = table.getValue(row,0); 

     alert("You selected :" + item);   

    } 

</script> 
</head> 

<body> 
<div id='table_div'></div> 

<input type="button" value="Select" onClick="selectionHandler()"> 

</body> 
</html>

在此先感謝所有花時間觀看此內容的人。我誠實地嘗試了這一點，希望有人能幫助我一點。

來源

2011-11-22 Tiwaz89

這裏是嘗試活碼一個工作版本。
沒有選擇事件的收聽者，並且您調用getValue調用data和table。

<html> 
<head> 
<script src='https://www.google.com/jsapi'></script> 

<script> 
    google.load('visualization', '1', {packages:['table']}); 
    google.setOnLoadCallback(drawTable); 
    var table, data; 

    function drawTable() { 
     data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Name'); 
     data.addColumn('number', 'Salary'); 
     data.addColumn('boolean', 'Full Time Employee'); 
     data.addRows(4); 
     data.setCell(0, 0, 'Mike'); 
     data.setCell(0, 1, 10000, '$10,000'); 
     data.setCell(0, 2, true); 
     data.setCell(1, 0, 'Jim'); 
     data.setCell(1, 1, 8000, '$8,000'); 
     data.setCell(1, 2, false); 
     data.setCell(2, 0, 'Alice'); 
     data.setCell(2, 1, 12500, '$12,500'); 
     data.setCell(2, 2, true); 
     data.setCell(3, 0, 'Bob'); 
     data.setCell(3, 1, 7000, '$7,000'); 
     data.setCell(3, 2, true); 

     table = new google.visualization.Table(document.getElementById('table_div')); 
     table.draw(data, {showRowNumber: true}); 
     //add the listener 
     google.visualization.events.addListener(table, 'select', selectionHandler); 
    } 

    function selectionHandler() { 
     var selectedData = table.getSelection(), row, item; 
     row = selectedData[0].row; 
     item = data.getValue(row,0); 
     alert("You selected :" + item);   
    } 

</script> 
</head> 

<body> 
<div id='table_div'></div> 

<input type="button" value="Select" onClick="selectionHandler()"> 

</body> 
</html>

來源

2011-11-22 09:48:48 Mic

我很難知道你的代碼錯在哪，從documentation這裏的示例代碼說明如何處理select事件：

// Create our table. 
var table = new google.visualization.Table(document.getElementById('table_div')); 
table.draw(data, options); 

// Add our selection handler. 
google.visualization.events.addListener(table, 'select', selectHandler); 

// The selection handler. 
// Loop through all items in the selection and concatenate 
// a single message from all of them. 
function selectHandler() { 
    var selection = table.getSelection(); 
    var message = ''; 
    for (var i = 0; i < selection.length; i++) { 
    var item = selection[i]; 
    if (item.row != null && item.column != null) { 
     var str = data.getFormattedValue(item.row, item.column); 
     message += '{row:' + item.row + ',column:' + item.column + '} = ' + str + '\n'; 
    } else if (item.row != null) { 
     var str = data.getFormattedValue(item.row, 0); 
     message += '{row:' + item.row + ', column:none}; value (col 0) = ' + str + '\n'; 
    } else if (item.column != null) { 
     var str = data.getFormattedValue(0, item.column); 
     message += '{row:none, column:' + item.column + '}; value (row 0) = ' + str + '\n'; 
    } 
    } 
    if (message == '') { 
    message = 'nothing'; 
    } 
    alert('You selected ' + message); 
}

你可以把它從jsfiddle

來源

2011-11-22 09:00:03

非常感謝:-)這實際上非常有幫助。 – Tiwaz89

@DeanGrobler歡迎:-) –

hhaahhhh終於從您的鏈接中得到我的錯誤。謝謝哥們 –

Google Charts API中的事件監聽器

回答

相關問題