如何同步並顯示不同谷歌圖表的工具提示？

爲了比較目的，我在兩個iframe上創建不同的谷歌圖表。爲了實現這一點，我需要同步鼠標點擊兩個圖表，並在點擊的特定位置顯示工具提示。如何同步並顯示不同谷歌圖表的工具提示？

儘管我已通過使用chart_2.setSelection(chart_1.getSelection());方法實現了同步鼠標單擊。

但提示沒有得到在那個特定位置顯示第二張圖上：

顯示第二張圖上提示的唯一方法是通過單擊圖表，然後在工具提示被激活：

它被激活後，則提示同步與第一譜圖和每次點擊完美的作品：

我試圖做到的，是無需手動啓動它來顯示第二張圖上的提示，但它而得到每點擊第一個圖表上顯示。

來源

2017-10-13 Karan Dhir

設置以下選項，以使工具提示上顯示 - >setSelection

var options = { 
    tooltip: { 
    trigger: 'both' 
    } 
};

看到下面的工作片段，
當'ready'事件觸發，做出選擇，
證明提示顯示

google.charts.load('current', { 
 
    packages: ['corechart'] 
 
}).then(function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['x', 'y0', 'y1', 'y2', 'y3'], 
 
    [1, 10, 15, 20, 25], 
 
    [2, 12, 18, 24, 30], 
 
    [3, 14, 21, 28, 35], 
 
    [4, 16, 24, 32, 40] 
 
    ]); 
 

 
    var options = { 
 
    pointSize: 4, 
 
    tooltip: { 
 
     trigger: 'both' 
 
    }, 
 
    width: 360 
 
    }; 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
 
    google.visualization.events.addListener(chart, 'ready', function() { 
 
    chart.setSelection([{row: 2, column: 1}]); 
 
    }); 
 
    chart.draw(data, options); 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

來源

2017-10-13 11:46:29 WhiteHat

我的工具提示的觸發器處於'選擇'狀態，我正在使用選擇偵聽器來同步兩個iframe上的鼠標點擊事件： 'google.visualization.events.addListener（chart，'select'，function ）{ parent.window.iframe_charts.forEach（function（element）{ element.setSelection（chart.getSelection（））; }）;' 其中'iframe_charts'是一個包含所有圖表對象值的數組。我想在任何圖表上單擊一次即可顯示兩個圖表的工具提示。 –

當你使用'setSelection'時，工具提示不會出現？（如上面的代碼片段） – WhiteHat

它實際上是這樣，但它只選擇一列（即圖例編號＃1），如果我使用'chart.setSelection（[{row：2，column：2}]）;'那麼它選擇第二列或圖例編號＃2，而我希望它選擇所有的列。 –

如何同步並顯示不同谷歌圖表的工具提示？

回答

相關問題