0

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

    <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>
4

1 回答 1

0

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

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

这需要您单击的第一个项目并传递一个仅包含行数据的对象。

来自这里的灵感和这里的工作示例。

于 2012-05-21T09:47:11.117 回答