通过鼠标悬停在谷歌图表中更新

Question

我正在使用Google图表以交互方式绘制一些数据.

我想绘制两个图表.第一张图表绘制了f(x)与x的关系曲线.第二个图表绘制g(x,y)与y(对于固定值x).在第一个图表的鼠标悬停时,x值将用于重绘g(x,y)与y.

例如,在第一个图表上的鼠标悬停x = 1时,第二个图表将刷新,绘制g(1,y)对y.

我能够实现这一目标的唯一方法是在javascript中手动绑定mouseover事件,并触发第二个图表的完全重绘(通过删除其数据并使用moused over x值复制数据).但是,有一种内置机制可以使用控件中的值重绘图表(例如滑块,此处为示例).

有没有人知道是否有办法绑定两个图表,以便鼠标悬停事件可用于重绘一个图表与新参数？

Answer 1

查看Programmatic Control Changes示例.您可以通过代码更改滑块的下限和上限:

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

如果选择一个lowValue和高价值两者的5例如仅含有用于指定列此值行将被显示.在第一个图表的onmouseover事件中调用此函数:

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";