Javascript 通过谷歌图表中的鼠标更新

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

我想画两张图表。第一张图表绘制了f（x）与x。第二张图表绘制了g（x，y）与y（对于固定值x）。在鼠标悬停第一张图表时，x值将用于重新绘制g（x，y）与y

例如，在第一个图表上x=1的鼠标上方，第二个图表将刷新，绘制g（1，y）与y

我能够做到这一点的唯一方法是在javascript中手动绑定mouseover事件，并触发第二个图表的完全重画（通过擦除其数据并使用mouseover x值复制数据）。但是，有一种内置机制可以使用控件（例如滑块）中的值重新绘制图表

是否有人知道是否有一种方法可以绑定两个图表，以便使用mouseover事件用新参数重新绘制一个图表？

看看这个示例。您可以通过以下代码更改滑块的上下限：

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

---

+1这是个聪明的主意；从本质上讲，它们与示例中的操作完全相同，但是使用了我手动更新的隐藏滑块。看起来奇怪的是，他们不会在更直接的内容中添加内容，但这让我现在的做法大吃一惊。我认为谷歌正在一步一步地扩展图表。也许你应该向他们建议你的想法。但这不是最简单的：必须有一个通用控件，它可以填充任何图表类型，并对任何数据上的任何事件作出反应，然后触发任何筛选器类型。非常感谢这个好主意，这真的节省了时间。：）