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值复制数据）。但是，有一种内置机制可以使用控件中的值重绘图表（例如滑块example here）。

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

Answer 1

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

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

1 个答案: