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

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的例子。如果你选择一个lowValue和高价值的两个例如仅包含指定列该值将是行

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

：您可以通过代码更改滑块的上限和下限所示。称此为第一个图表的你的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";