禁用懸停效果懸停在谷歌圖表上的酒吧

Question

我有一個谷歌圖表的時間表，我想禁用懸停動畫，每當酒吧被挖空時發生。我也有點擊互動與酒吧，所以我想刪除這個懸停動畫，而不禁用我的點擊交互。有什麼辦法可以做到這一點？

Answer 1

禁用的提示，而無需使用configuration option影響'select'事件

- >tooltip.trigger: 'none'

編輯

，以防止從懸停改變顏色酒吧

保存對原始欄的引用時'ready'事件觸發
酒吧將是rect元素，與x屬性大於0

當原來的酒吧是上空盤旋，一個新的酒吧創建
它會在列表中

最後 rect

所以使用從事件或選擇row參考，
回保存參考改變'fill'顏色的新酒吧，

使用'onmouseover'和'select'事件

見下工作片斷......

google.charts.load('current', { 
 
    callback: function() { 
 
    var container = document.getElementById('timeline'); 
 
    var chart = new google.visualization.Timeline(container); 
 
    var dataTable = new google.visualization.DataTable(); 
 

 
    dataTable.addColumn({ type: 'string', id: 'President' }); 
 
    dataTable.addColumn({ type: 'date', id: 'Start' }); 
 
    dataTable.addColumn({ type: 'date', id: 'End' }); 
 
    dataTable.addRows([ 
 
     [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], 
 
     [ 'Adams',  new Date(1797, 2, 4), new Date(1801, 2, 4) ], 
 
     [ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]); 
 

 
    // save original colors 
 
    var origColors = []; 
 
    google.visualization.events.addListener(chart, 'ready', function() { 
 
     bars = container.getElementsByTagName('rect'); 
 
     Array.prototype.forEach.call(bars, function(bar, index) { 
 
     if (parseFloat(bar.getAttribute('x')) > 0) { 
 
      origColors.push(bar.getAttribute('fill')); 
 
     } 
 
     }); 
 
    }); 
 

 
    google.visualization.events.addListener(chart, 'select', function() { 
 
     var selection = chart.getSelection(); 
 
     if (selection.length > 0) { 
 
     // set original color 
 
     var bars = container.getElementsByTagName('rect'); 
 
     bars[bars.length - 1].setAttribute('fill', origColors[selection[0].row]); 
 
     } 
 
     document.getElementById('msg_div').innerHTML = JSON.stringify(chart.getSelection()); 
 
    }); 
 
    google.visualization.events.addListener(chart, 'onmouseover', function (e) { 
 
     // set original color 
 
     var bars = container.getElementsByTagName('rect'); 
 
     bars[bars.length - 1].setAttribute('fill', origColors[e.row]); 
 
    }); 
 

 
    chart.draw(dataTable, { 
 
     tooltip: { 
 
     trigger: 'none' 
 
     } 
 
    }); 
 
    }, 
 
    packages: ['timeline'] 
 
});

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