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 に答える