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

Question

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

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

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

我能够完成此操作的唯一方法是在 javascript 中手动绑定(bind)鼠标悬停事件，并触发第二个图表的完全重绘(通过删除其数据并使用鼠标悬停在 x 值上的数据复制数据)。但是，有一种内置机制可以使用控件(例如 slider 、example here)中的值重绘图表。

有谁知道是否有办法绑定(bind)两个图表，以便可以使用鼠标悬停事件使用新参数重绘一个图表？

Answer 1

看看 Programmatic Control Changes例子。您可以通过代码更改 slider 的下限和上限:

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

例如，如果您选择 lowValue 和 highValue 均为 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();
  }
);

因为您不希望 slider 可见，只需将其隐藏:

// the slider has been created with 'containerId': 'control'
document.getElementById ("control").style.display = "none";