Question

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

图表工作正常（请参阅下面的小提琴），但我想更改拖动缩放时创建的框的突出显示颜色。默认是一个非常独特的Google-ish Blue：

我目前正在设置Explorer对象的参数，如下所述，但＆＃34;折线图参考＆＃34;没有提到可以设置更改突出显示颜色的属性，那么我该如何去做呢？我试着深入研究“loader.js”。文件，但无法理解它在做什么！非常感谢。

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

Chart Fiddle

Answer 1

正如您所提到的，explorer.color

没有选项

您可以尝试手动更改

但图表会在每次获得机会时将其更改

请参阅以下工作代码组使用事件列表将颜色更改为'magenta'

你可以看到颜色闪烁，因为图表会战斗以改变颜色

＆＃13;

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']
});

＆＃13;

<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>

＆＃13;

Answer 2

<强>更新

我可能在最后一次更新时跳了起来，似乎由于性能问题，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的headstart，我设法通过使用jQuery监听器来解决这个问题：DOMNodeInserted＆＃39;并修改填充（请参阅此更新底部的笔）。

再次感谢您的帮助！

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

Google Visualization Charts API - 在折线图上更改资源管理器功能的高亮颜色

2 个答案: