Google Charts (AreaChart) how to detect zoom change

问题

I am drawing an AreaChart, with some markers on an overlay.

I am using the explorer option (horizontal only) in order to let the user zoom in and out. The problem is that I can't find a way to be notified that zoom changed, in order to have a chance to update maker positions consequently. There is a chart rangechange event, but it is not fired by AreaChart.

I tried detecting common onmousewheel/onwheel event, and ondragstart/ondragend events, but:

1) onmousewheel/onwheel is fired before the chart zooms, not after, so marker re-positioning can not be calculated consistently

2) ondragstart/ondragend is not fired by the chart element, when, after zooming in, the user drags left or right the chart content, in order to move it, so again no chance to re-position markers

Can anyone help?

回答1:

rather than relying on events to detect zoom change

use a mutation observer, which will notify when elements have been added to the chart container

each time a zoom occurs, elements are added to the chart
such as the background highlighting of the area selected when zoomed

see following working snippet, which uses a mutation observer to detect zoom,
and change the color of the selection box...

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>

来源：https://stackoverflow.com/questions/40420984/google-charts-areachart-how-to-detect-zoom-change

标签

javascript

charts

google-visualization