2

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

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

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

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

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

4

1 回答 1

6

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

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

例如，如果您选择同时为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";
于 2012-11-11T00:56:47.677 回答