javascript - Google Charts (AreaChart) 如何检测缩放变化

Question

我正在绘制一个 AreaChart，在叠加层上有一些标记。

我正在使用 explorer 选项(仅限水平)，以便让用户放大和缩小。问题是我无法找到一种方法来通知缩放已更改，以便有机会相应地更新制造商位置。有一个图表 rangechange 事件，但它不是由 AreaChart 触发的。

我尝试检测常见的 onmousewheel/onwheel 事件和 ondragstart/ondragend 事件，但是:

1) onmousewheel/onwheel 在图表缩放之前触发，而不是之后，因此无法一致地计算标记重新定位

2) ondragstart/ondragend 不是由图表元素触发的，当放大后，用户向左或向右拖动图表内容以移动它，所以再次没有机会重新定位标记

有人能帮忙吗？

Answer 1

而不是依赖事件来检测缩放变化

使用变异观察器，当元素被添加到图表容器时它会发出通知

每次发生缩放时，元素都会添加到图表中
比如缩放时选中区域的背景高亮

请参阅以下工作代码段，它使用突变观察器检测缩放，
并更改选择框的颜色...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable({
      "cols": [
        {"label": "X", "type": "number"},
        {"label": "Y", "type": "number"}
      ],
      "rows": [
        {"c": [{"v": 0}, {"v": 0}]},
        {"c": [{"v": 1}, {"v": 1}]},
        {"c": [{"v": 2}, {"v": 2}]},
        {"c": [{"v": 3}, {"v": 4}]},
        {"c": [{"v": 4}, {"v": 8}]},
        {"c": [{"v": 5}, {"v": 16}]},
        {"c": [{"v": 6}, {"v": 32}]},
        {"c": [{"v": 7}, {"v": 64}]},
        {"c": [{"v": 8}, {"v": 128}]},
        {"c": [{"v": 9}, {"v": 256}]}
      ]
    });

    var options = {
      explorer: {
        actions: ['dragToZoom', 'rightClickToReset'],
        axis: 'horizontal',
        keepInBounds: true
      },
      hAxis: {
        title: 'X'
      },
      vAxis: {
        title: 'Y'
      }
    };

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

    var observer = new MutationObserver(function (mutations) {
      mutations.forEach(function (mutation) {
        mutation.addedNodes.forEach(function (node) {

          // adjust overlays here
          if (node.getAttribute('fill') === '#0000ff') {
            node.setAttribute('fill', '#00ff00');
          }

        });
      });
    });
    observer.observe(chartDiv, {
      childList: true,
      subtree: true
    });

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

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>