Google 차트가 선택된 값을 얻습니다.

Google 표 차트에서 선택한 값을 얻으려고합니다. 문자열 필터를 사용하여 차트 내용을 필터링하지 않으면 DataTable에 따라 선택한 행의 인덱스를 반환하지만 문자열 필터를 사용하여 필터링하면 올바른 문제가 반환되지 않습니다. Google 차트가 선택된 값을 얻습니다.

이 문제는 다음 코드 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을 테스트해야합니다. array가 배열이 비어 있거나 (두 개 이상의 행이 선택된 경우 여러 요소가 포함될 수 있기 때문에) 배열의 모든 요소에 액세스하려고 시도하기 전에 다음을 수행하십시오.

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

Google 차트가 선택된 값을 얻습니다.

답변

관련 문제