Google Charts/Visualization - 點擊離開工具提示

使用Google Charts（尚未遷移到Material Charts），可以通過使用{trigger: 'selection'}選項使工具提示需要點擊。然而，使用這個工具提示不能被解僱，除非用戶點擊圖表中的另一個數據點 - 他們不能只是點擊任何地方。Google Charts/Visualization - 點擊離開工具提示

有沒有一種方法可以讓工具提示在單擊工具提示之外的任何位置時被解僱？這種方式稍微有點流暢。

來源

2015-09-04 fpcjh

https://jsfiddle.net/5znwrphe/ - 點擊圖表欄，它會顯示一個工具提示。現在點擊它，除非您再次單擊相同的圖表欄，否則它不會繼續。 – fpcjh

你可以附上click事件處理body元素清除圖表的選擇，如下面所示：

例

google.setOnLoadCallback(drawChart); 
 

 
var chart; 
 
function drawChart() { 
 

 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Year', 'Fixations'], 
 
     ['2015', 80], 
 
     ['2016', 90], 
 
     ['2017', 100], 
 
     ['2018', 90], 
 
     ['2019', 80], ]); 
 

 
    var options = { 
 
     tooltip: { 
 
      isHtml: true, 
 
      trigger: 'selection' 
 
     }, 
 
     legend: { 
 
      position: 'none' 
 
     }, 
 
     bar: { 
 
      groupWidth: '90%' 
 
     }, 
 
     colors: ['#A61D4C'], 
 
     enableInteractivity: true 
 
    }; 
 

 
    chart = new google.visualization.ColumnChart(document.getElementById('tooltip_rotated')); 
 

 
    chart.draw(data, options); 
 
    addEvent(document.querySelector('body'),'click',clearSelection); 
 
} 
 

 

 
function clearSelection (e) { 
 
    if (!document.querySelector('#tooltip_rotated').contains(e.srcElement)) { 
 
     chart.setSelection(); 
 
    } 
 
} 
 

 

 
function addEvent(element, evnt, funct){ 
 
    if (element.attachEvent) 
 
    return element.attachEvent('on'+evnt, funct); 
 
    else 
 
    return element.addEventListener(evnt, funct, false); 
 
}

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script> 
 
<div id="tooltip_rotated" style="width: 400px; height: 400px;"></div>

來源

2015-09-05 20:08:58

該代碼段不能按預期工作。它是用來工作，而不是現在了。谷歌圖表API改變了，你的答案不再適用了嗎？ – Urielzen

我能得到的東西與工作類似：不要讓工具提示在點擊時消失，但當您點擊工具提示時小精靈。也許你可以在工具提示中添加一個關閉按鈕。

首先，它必須是一個HTML工具提示：

tooltip: { isHtml: true }

然後，你必須添加在你傳遞給圖表（假設jQuery的）字符串HTML以下地方：

$("<div></div>").attr("onclick", "$(this).closest('.google-visualization-tooltip').hide()")

或者如果你不使用jQuery的話類似的東西。這似乎只適用於爲工具提示傳遞的html內容的內部div，因此這需要是一個子div。

此外，您還需要將以下事件處理程序添加到圖表：

google.visualization.events.addListener(chart, "onmouseover", function(event){ 
     chart.setSelection(null); 
});

否則，當你將鼠標懸停在圖表的工具提示將重新彈出。

來源

2016-05-03 15:28:08 dennisr2000

Google Charts/Visualization - 點擊離開工具提示

回答

相關問題