Question

我正在尝试获取Google表格图表的选定值。当未使用字符串过滤器过滤图表内容时，它会根据DataTable返回所选行的索引，但是当使用字符串过滤器对其进行过滤时，它不会返回正确的问题。

要复制此问题，请执行以下代码 1.运行以下代码

在表格中选择Aaron。消息框将其索引显示为5。
输入字母＆＃39; A＆＃39;在字符串过滤器中。现在选择Aaron，它将返回0，这是一个错误。

它应该返回数据表中行的索引，以便＆＃39; Aaron＆＃39;这是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>

Answer 1

这应该有效：

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

getTableRowIndex将行追溯到数据表

Answer 2

扩展juvian的答案，您应该在尝试访问数组中的任何元素之前测试选择长度，因为数组可能为空（或者如果选择了多行，则包含多个元素）：

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

谷歌图表获得选定的价值

2 个答案: