谷歌图表(AreaChart)如何检测缩放变化

Google Charts (AreaChart) how to detect zoom change

本文关键字：检测 缩放 变化 何检测 AreaChart 谷歌      更新时间：2023-09-26

我正在绘制一个AreaChart，在覆盖上有一些标记。

我正在使用资源管理器选项(仅水平)，以便让用户放大和缩小。问题是，我找不到一种方法来通知缩放改变，以便有机会更新制造商的位置。有一个chart rangechange事件，但是它不是由AreaChart触发的。

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

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

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

有人能帮忙吗?

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

使用一个突变观察者，当元素被添加到图表容器

时，它会通知

每当缩放出现时，就会向图表中添加元素
例如在缩放

时所选区域的背景高亮显示。

请参见下面的工作片段，它使用一个突变观察者来检测缩放，
然后改变选择框的颜色…

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>

相关文章：