2

Googleのグラフを使用して、インタラクティブにデータを描画しています。

2つのチャートを描きたいです。最初のグラフは、f（x）とxをプロットしています。2番目のグラフは、g（x、y）とy（固定値xの場合）をプロットします。最初のグラフにマウスオーバーすると、x値を使用してg（x、y）とyが再描画されます。

たとえば、最初のグラフでx = 1をマウスオーバーすると、2番目のグラフが更新され、g（1、y）対yが描画されます。

これを実現する唯一の方法は、javascriptでmouseoverイベントを手動でバインドし、2番目のグラフの完全な再描画をトリガーすることでした（データを消去し、mouseover x値でデータをコピーすることによって）。ただし、コントロールの値を使用してグラフを再描画するための組み込みのメカニズムがあります（例：スライダー、ここの例）。

マウスオーバーイベントを使用して新しいパラメーターで1つのグラフを再描画できるように、2つのグラフをバインドする方法があるかどうか誰かが知っていますか？

4

1 に答える 1

6

プログラムによる制御の変更の例をご覧ください。コードによってスライダーの下限と上限を変更できます。

document.getElementById('rangeButton').onclick = function() {
  slider.setState({'lowValue': 2, 'highValue': 5});
  slider.draw();
};

たとえば、両方5のlowValueとhighValueを選択した場合、指定された列にこの値を含む行のみが表示されます。最初のチャートのマウスオーバーイベント内でこれを呼び出します。

google.visualization.events.addListener(chart1, 'onmouseover', function (e) {
    // get the value for x in the current row from the data table
    var xValue = data.getValue (e.row, 0);
    // set the new bounds of the slider
    slider.setState({'lowValue': xValue, 'highValue': xValue});
    // update the slider (and chart2)
    slider.draw();
  }
);

スライダーを表示したくないので、非表示にします。

// the slider has been created with 'containerId': 'control'
document.getElementById ("control").style.display = "none";
于 2012-11-11T00:56:47.677 に答える