我正在使用 Google 图表以交互方式绘制一些数据。
我想画两张图表。第一个图表绘制了 f(x) 与 x 的关系。第二个图表绘制了 g(x,y) 与 y 的关系（对于固定值 x）。在第一个图表的鼠标悬停时，x 值将用于重绘 g(x,y) 与 y。
例如，当鼠标悬停在第一个图表上的 x=1 时，第二个图表将刷新，绘制 g(1,y) 与 y。
我能够做到这一点的唯一方法是在 javascript 中手动绑定 mouseover 事件，并触发第二个图表的完全重绘（通过擦除其数据并使用鼠标悬停的 x 值复制数据）。但是，有一个内置机制可以使用来自控件的值（例如滑块，example here）重绘图表。
有谁知道是否有办法绑定两个图表，以便可以使用鼠标悬停事件重新绘制一个带有新参数的图表？
【问题讨论】：
标签： javascript google-visualization
查看Programmatic Control Changes 示例。您可以通过代码更改滑块的下限和上限：
document.getElementById('rangeButton').onclick = function() {
slider.setState({'lowValue': 2, 'highValue': 5});
slider.draw();
};
如果您选择 5 中的 lowValue 和 highValue，则只会显示包含指定列的该值的行。在第一个图表的 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";
【讨论】：