Google Visualization Charts API - Ändern der Hervorhebungsfarbe der Explorer-Funktion im Liniendiagramm

Question

Ich benutze das Google Visualization API, um einige Diagramme auf einer Webseite zu generieren und die "Explorer" -Option zu verwenden, um Benutzern das Vergrößern zu ermöglichen Bereiche von Liniendiagrammen.

Die Diagramme funktionieren gut (siehe Geige unten), aber ich möchte die Hervorhebungsfarbe der Box ändern, die beim Ziehen zum Zoomen erstellt wird. Der Standardwert ist ein ganz besonderer Google-ish Blue:

ich zur Zeit der Parameter des Explorer-Objekts festgelegt habe, wie unten beschrieben, aber die „Liniendiagramm Reference“ nicht erwähnt, eine Eigenschaft, die können eingestellt sein, um die Hervorhebungsfarbe zu ändern, also wie könnte ich es tun? Ich habe versucht, in die 'loader.js'-Datei zu gehen, konnte aber keinen Sinn darin sehen! Danke vielmals.

explorer: { 
    actions: ['dragToZoom', 'rightClickToReset'], 
    axis: 'horizontal', 
    keepInBounds: true, 
    maxZoomOut: 1, 
    maxZoomIn: 0.01, 
} 

Chart Fiddle

Answer 1

UPDATE ändern kämpft:

Vielleicht habe ich sprang die gun beim letzten update scheint es so, als ob Mutationsereignisse wie DOMNodeInserted aus Performanceproblemen für eine Weile veraltet sind Ich habe meine vorherige Lösung mit dem weiter unten unterstützten MutationObserver umgeschrieben.

var container = document.getElementById('chart_div'); 
var chart = new google.visualization.LineChart(container); 
chart.draw(data, options); 

var observer = new MutationObserver(function(mutations) { 
    for(var i=0; i<mutations.length; ++i) { 
    for(var j=0; j<mutations[i].addedNodes.length; ++j) { 
     if (mutations[i].addedNodes[j].getAttribute('fill') === '#0000ff') { 
     mutations[i].addedNodes[j].setAttribute('fill', 'magenta'); 
     } 
    } 
    } 
}); 
var config = { childList: true, subtree:true }; 
observer.observe(container, config); 

CodePen using MutationObserver

ORIGINAL ANTWORT:

whitehat der Vorsprung verwenden, ich habe es geschafft, diese zu knacken, indem ein jQuery-Listener für 'DOMNodeInserted' mit und Modifizieren der Füllung (siehe Stift an der Ende dieses Updates).

Nochmals vielen Dank für die Hilfe!

var container = document.getElementById('chart_div'); 
var chart = new google.visualization.LineChart(container); 

$(container).on('DOMNodeInserted', changeExplorer); 

function changeExplorer() { 
    var rects = container.getElementsByTagName('rect'); 
    Array.prototype.forEach.call(rects, function(rect) { 
    if (rect.getAttribute('fill') === '#0000ff') { 
     rect.setAttribute('fill', 'magenta'); 
    } 
    }); 
} 

CodePen with custom Explorer Box Highlighting

Answer 2

wie Sie bereits erwähnt, gibt es keine Option für explorer.color

Sie könnten versuchen, es

manuell zu ändern, aber das Diagramm wird es bei jeder Gelegenheit wieder ändern wird es

siehe folgenden Arbeits Snippet
verwendet eine Liste von Ereignissen zu ändern die Farbe zu 'magenta'

Sie die Farbe flackern sehen können, wie das Diagramm die Farbe zurück

google.charts.load('current', { 
 
    callback: function() { 
 
    var y = { 
 
     "cols": [ 
 
     {"p": {"role": "domain"},"label": "Distance","type": "number"}, 
 
     {"p": {"role": "data"},"label": "Row A","type": "number"}], 
 

 
     "rows": [ 
 
     {"c":[{"v":0.00},{"v":154.0}]}, 
 
     {"c":[{"v":0.01},{"v":154.3}]}, 
 
     {"c":[{"v":0.02},{"v":155.1}]}, 
 
     {"c":[{"v":0.03},{"v":155.4}]}, 
 
     {"c":[{"v":0.05},{"v":155.7}]}, 
 
     {"c":[{"v":0.09},{"v":156.3}]}, 
 
     {"c":[{"v":0.11},{"v":156.6}]}, 
 
     {"c":[{"v":0.12},{"v":156.8}]}, 
 
     {"c":[{"v":0.12},{"v":156.8}]}, 
 
     {"c":[{"v":0.13},{"v":156.3}]}, 
 
     ] 
 
    }; 
 
    var data = new google.visualization.DataTable(y); 
 

 
    var options = { 
 
     explorer: { 
 
     actions: ['dragToZoom', 'rightClickToReset'], 
 
     axis: 'horizontal', 
 
     keepInBounds: true, 
 
     maxZoomOut: 1, 
 
     maxZoomIn: 0.01, 
 
     }, 
 
     hAxis: { 
 
     title: 'Distance' 
 
     }, 
 
     vAxis: { 
 
     title: 'Elevation' 
 
     }, 
 
    }; 
 

 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.LineChart(container); 
 

 
    google.visualization.events.addListener(chart, 'click', changeExplorer); 
 
    google.visualization.events.addListener(chart, 'ready', changeExplorer); 
 
    google.visualization.events.addListener(chart, 'select', changeExplorer); 
 
    google.visualization.events.addListener(chart, 'onmouseover', changeExplorer); 
 
    google.visualization.events.addListener(chart, 'onmouseout', changeExplorer); 
 

 
    $(container).on({ 
 
     click: changeExplorer, 
 
     drag: changeExplorer, 
 
     dragend: changeExplorer, 
 
     dragenter: changeExplorer, 
 
     dragleave: changeExplorer, 
 
     dragover: changeExplorer, 
 
     dragstart: changeExplorer, 
 
     drop: changeExplorer, 
 
     mousedown: changeExplorer, 
 
     mouseenter: changeExplorer, 
 
     mouseleave: changeExplorer, 
 
     mousemove: changeExplorer, 
 
     mouseout: changeExplorer, 
 
     mouseover: changeExplorer, 
 
     mouseup: changeExplorer, 
 
     selectend: changeExplorer, 
 
     selectstart: changeExplorer 
 
    }); 
 

 
    function changeExplorer() { 
 
     var rects = container.getElementsByTagName('rect'); 
 
     Array.prototype.forEach.call(rects, function(rect) { 
 
     if (rect.getAttribute('fill') === '#0000ff') { 
 
      rect.setAttribute('fill', 'magenta'); 
 
     } 
 
     }); 
 
    } 
 

 
    chart.draw(data, options); 
 
    }, 
 
    packages:['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<div id="chart_div"></div>