Question

这是我关于堆栈溢出的第一个问题。我根据他们的示例制作了一个谷歌图表工具散点图/表组合。当我单击表格中的一行时，会选择散点图中的相应点（这很好）。但它没有反过来。我无法在散点图中选择一个点，并让它选择表格中的相应行。有谁知道为什么这不能按预期工作？我的代码如下：

    <html>
      <head>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart", "table"]});
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Age', 'Weight'],
          [ 8,      12],
      [ 4,      5.5],
      [ 11,     14],
      [ 4,      5],
      [ 3,      3.5],
      [ 6.5,    7],
      [ 6.5,    7]
    ]);

    var options = {
      title: 'Age vs. Weight comparison',
      hAxis: {title: 'Age', minValue: 0, maxValue: 15},
      vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
      legend: 'none'
    };

    var chart = new    google.visualization.ScatterChart(document.getElementById('chart_div'));
    var table = new google.visualization.Table(document.getElementById('table_div'));
    chart.draw(data, options);
    table.draw(data);

    google.visualization.events.addListener(chart, 'select', function() {
    table.setSelection(chart.getSelection());});

    google.visualization.events.addListener(table, 'select', function() {
    chart.setSelection(table.getSelection());});

  }
     google.setOnLoadCallback(drawChart);

    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 500px; height: 500px;"></div>
    <div id="table_div" style="width: 500px; height: 500px;"></div>
  </body>
</html>

Answer 1

因为getSelection()既返回散点图的列和行，又返回表的行，因此存在一些冲突。事实证明，如果您只是从散点图中传递行信息，您确实可以选择表格行，您只需要以下内容：

table.setSelection([{row: chart.getSelection()[0].row}]);

这会获取您点击的第一个项目并传递仅包含行数据的对象。

来自here和工作示例here的灵感。

Google Charts Tools - Scatter和Table Combo Interaction，为什么单向？

1 个答案: