Question

我有一个Google图表。我已使用以下选项使用户能够拖动和缩放。

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

下面还有一个侦听器，当单击其图例时隐藏/显示一个系列。

google.visualization.events.addListener(chart, 'select', showHideSeries);

一切正常。我要弄清楚的是要知道用户何时放大或右键单击以进行重置。有没有知道这件事的事件或方式？

我想知道的原因是因为我想获取最小和最大x轴值并执行计算。我可以使用下面的函数获取这些值，该函数已发布在此post

中

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

这是j小提琴示例my example

更新

道歉，我想我错过了重要的信息部分。因此，我的ajax函数从服务器获取数据，然后调用一个函数绘制图表。

$(document).ready(function () {

// $.ajax(...);});

我在绘制图表的函数中添加了其他代码。但是，该图表不再加载。我收到此错误消息，

未捕获的错误：未定义容器。

它发生在下面的第二行代码中。

var chartDiv = document.getElementById（'chartScore'）

var chart = new google.visualization.AreaChart（document.getElementById（chartDiv））;

如果我取出图表下方的代码，则会进行绘制。

 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(chartDiv, {
        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)
        }
    };
}

现在可以使用

我删除了

var chartDiv = document.getElementById（'chartScore'）

并更改

observer.observe（chartDiv，{

到

observer.observe（document.getElementById（'chartScore'），{

Answer 1

您可以使用突变观察器来了解何时发生缩放事件

当图表上的任何内容发生变化时，变异观察者实际上会通知您
这意味着当鼠标悬停或选中某个点时它将触发。

但是您可以跟踪当前的缩放级别并确定何时更改

请参阅以下工作片段...

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>

用户放大或右键单击以重置时的Google图表事件

1 个答案: