通過谷歌圖表中的鼠標懸停更新

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