구글 차트 drag to zoom 이벤트 인지

google charts event for when user zooms or right clicks to reset

google charts event for when user zooms or right clicks to reset

 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    [0, 6],
    [1, 7],
    [2, 8],
    [3, 9],
    [4, 5]
  ], true);

  var options = {
    pointSize: 4,
    explorer: {
      keepInBounds: true,
      actions: ['dragToZoom', 'rightClickToReset']
    }
  };

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

  google.visualization.events.addListener(chart, 'ready', function () {
    var zoomLast = getCoords();
    var observer = new MutationObserver(function () {
      var zoomCurrent = getCoords();
      if (JSON.stringify(zoomLast) !== JSON.stringify(zoomCurrent)) {
        zoomLast = getCoords();
        console.log('zoom event');
      }
    });
    observer.observe(container, {
      childList: true,
      subtree: true
    });
  });

  function getCoords() {
    var chartLayout = chart.getChartLayoutInterface();
    var chartBounds = chartLayout.getChartAreaBoundingBox();

    return {
      x: {
        min: chartLayout.getHAxisValue(chartBounds.left),
        max: chartLayout.getHAxisValue(chartBounds.width + chartBounds.left)
      },
      y: {
        min: chartLayout.getVAxisValue(chartBounds.top),
        max: chartLayout.getVAxisValue(chartBounds.height + chartBounds.top)
      }
    };
  }

  chart.draw(data, options);
});

 

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

Detect zoom event for a Google Line chart?

Detect zoom event for a Google Line chart?

developers.google.com/chart/interactive/docs/events

구글 차트 이벤트관련 공식 레퍼런스

Handling Events  |  Charts  |  Google Developers