javascript - Google Visualization Charts API - 更改折线图上资源管理器功能的突出显示颜色

Question

我正在使用 Google Visualization API 在网页上生成一些图表，并希望利用“资源管理器”选项允许用户放大折线图区域。

图表工作正常(请参见下面的 fiddle )，但我想更改拖动缩放时创建的框的突出显示颜色。默认值是非常独特的 Google 风格的蓝色:

我目前已经按照下面的详细信息设置了 Explorer 对象的参数，但是“折线图引用”没有提到可以设置为更改突出显示颜色的属性，那么我该怎么做呢？我尝试深入研究“loader.js”文件，但无法理解它在做什么!非常感谢。

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

Chart Fiddle

Answer 1

更新:

我可能在上次更新时操之过急，似乎由于性能问题，诸如 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

原始答案:

利用whitehat的先机，我成功地通过使用'DOMNodeInserted'的jQuery监听器并修改填充来解决这个问题(参见本次更新底部的笔)。

再次感谢您的帮助!

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