谷歌圖表得到選定的值

我想獲得谷歌表圖表的選定值。如果圖表內容未使用字符串過濾器進行過濾，則會根據DataTable返回所選行的索引，但是如果使用字符串過濾器對其進行過濾，則不會返回正確的問題。谷歌圖表得到選定的值

複製問題，請執行以下代碼 1.運行下面的代碼

選擇亞倫在表中。消息框將顯示其索引爲5.
在字符串過濾器中鍵入字母'A'。現在選擇Aaron，它會返回0這是一個錯誤。

它應該返回行的索引數據表 '阿龍'，這是5

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Google Developers</title> 

     <link rel="stylesheet" type="text/css" href="/_static/07491c0cdc/css/screen-docs.css" /> 
     <link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" /> 
     <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400" type="text/css"> 
     <script src="/_static/07491c0cdc/js/prettify-bundle.js"></script> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
    <script id="jqueryui" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer async></script> 
    <script src="http://www.google.com/jsapi?key=AIzaSyCZfHRnq7tigC-COeQRmoa9Cxr0vbrK6xw"></script> 
    <!--[if lt IE 9]> 
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
    <script src="/_static/07491c0cdc/js/framebox.js"></script> 
    </head> 
    <body class="docs slim framebox_body"> 


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

<div id="stringFilter_dashboard_div" style="border: 1px solid #ccc"> 
<div id="stringFilter_control_div" style="padding-left: 2em"></div> 
<div id="stringFilter_chart_div"></div> 
</div> 

<script type="text/javascript"> 
    google.load('visualization', '1.0', {'packages':['corechart', 'table', 'gauge', 'controls']}); 
    google.setOnLoadCallback(apiLoaded); 
    function apiLoaded() { 
    drawStringFilter(); 
    } 

    function drawStringFilter() { 
    var dashboard = new google.visualization.Dashboard(
     document.getElementById('stringFilter_dashboard_div')); 
    var control = new google.visualization.ControlWrapper({ 
     'controlType': 'StringFilter', 
     'containerId': 'stringFilter_control_div', 
     'options': { 
     'filterColumnIndex': 0 
     } 
    }); 
    var chart = new google.visualization.ChartWrapper({ 
     'chartType': 'Table', 
     'containerId': 'stringFilter_chart_div', 
     'options': {'height': '25em', 'width': '20em'} 
    }); 

    google.visualization.events.addListener(chart,'select',tableSelectHandler); 

    function tableSelectHandler(){ 
     var selectedItem = chart.getChart().getSelection()[0]; 
     alert(selectedItem.row); 
    } 

    var data = google.visualization.arrayToDataTable([ 
     ['Name', 'Age'], 
     ['Michael' , 12], 
     ['Elisa', 20], 
     ['Robert', 7], 
     ['John', 54], 
     ['Jessica', 22], 
     ['Aaron', 3], 
     ['Margareth', 42], 
     ['Miranda', 33] 
    ]); 
    dashboard.bind(control, chart); 
    dashboard.draw(data); 
    } 
</script> 


    <script> 

     devsite.github.Link.convertAnchors(); 

     window.prettyPrint(); 


    </script> 
    </body> 
</html>

來源

2014-09-04 Joe Samraj

這應該工作：

function tableSelectHandler(e){ 
    var selectedItem = chart.getChart().getSelection()[0]; 
    var true_selected = chart.getDataTable().getTableRowIndex(selectedItem.row) 
    alert(true_selected); 
}

getTableRowIndex痕跡排回到數據表

來源

2014-09-04 17:46:00 juvian

擴展juvian的答案，你應該測試選擇l在嘗試訪問陣列中的任何元素之前進行搜索，因爲該數組可能是空的（或者如果選擇多於一行，則包含多個元素）：

function tableSelectHandler(e){ 
    var selection = chart.getChart().getSelection(); 
    var dt = chart.getDataTable(); 
    for (var i = 0; i < selection.length; i++) { 
     // colIndex is the index of the column you want to get data from 
     var value = dt.getValue(selection.row, colIndex); 
    } 
}

來源

2014-09-05 03:25:03 asgallant

谷歌圖表得到選定的值

回答

相關問題