Google可視化圖表API - 更改折線圖上瀏覽器功能的突出顯示顏色

Question

我正在使用Google Visualization API在網頁上生成一些圖表，並且想要使用「資源管理器」選項來允許用戶放大折線圖區域。

圖表正常工作（請參閱下面的提琴），但我想要更改拖動到縮放時創建的框的高亮顏色。默認值是一個非常獨特的谷歌十歲上下的藍色：

我當前設置的瀏覽器對象的參數詳見下文，但「折線圖參考」中沒有提到的屬性，可以被設置爲改變高亮顏色，那麼我該如何去做呢？我試圖鑽研'loader.js'文件，但無法理解它在做什麼！非常感謝。

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

Chart Fiddle

Answer 1

UPDATE：

我可能已經跳下在最近的更新中，似乎像DOMNodeInserted之類的突變事件由於性能問題已被棄用一段時間，所以我使用更廣泛支持的MutationObserver重寫了我以前的解決方案，如下所示。

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

原來的答案：

使用白帽的領先地位，我已經成功使用jQuery的監聽器「DOMNodeInserted」和修改填充破解這個（見筆在此更新的底部）。

再次感謝您的幫助！

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

正如你所說，沒有對explorer.color

一個選項，您可以嘗試手動更改

但圖表將改回每一個機會，它會

請參閱以下工作片段
使用事件列表來改變顏色爲'magenta'

你可以看到彩色閃爍的圖表打架改變顏色重新

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>