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>