Deaktivierung des Hover-Effekts beim Überfahren einer Leiste in Google Charts

Question

Ich habe eine Google Charts-Zeitleiste und möchte die Hover-Animation deaktivieren, die immer dann auftritt, wenn ein Balken über den Mauszeiger gezogen wird. Ich habe auch Klick-Interaktionen mit der Leiste. Daher möchte ich diese Hover-Animation entfernen, ohne meine Klick-Interaktionen zu deaktivieren. Gibt es eine Möglichkeit für mich, dies zu tun?

Answer 1

deaktivieren Sie den Tooltip, ohne das 'select' Ereignis zu beeinflussen

durch die configuration option mit ->tooltip.trigger: 'none'

EDIT

zu schweben die Stäbe aus wechselnden Farben auf verhindern

Speichern Sie einen Verweis auf die ursprüngliche Leiste, wenn die 'ready' Ereignis ausgelöst wird
die Balken rect Elemente, mit einem x Attribut größer als 0

sein, wenn ein Original-Bar ist über schwebte, wird eine neue Bar
erstellt wird es der letzte rect in der Liste

so ändern Sie die 'fill' Farbe der neuen Bar,
die row Referenz von der Veranstaltung oder die Auswahl mit,
zurück zur Referenz gespeichert

mit 'onmouseover' und 'select' Ereignisse

siehe folgende Arbeits Schnipsel ...

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>