Question

我正在绘制 AreaChart ，并在叠加层上显示一些标记。

我正在使用资源管理器选项（仅限水平），以便让用户放大和缩小。问题是我无法找到通知变焦变化的方法，以便有机会更新制造商的位置。有一个图表 rangechange 事件，但它不会被AreaChart触发。

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

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

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

有人可以帮忙吗？

Answer 1

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

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

每次发生 zoom 时，元素都会添加到图表中例如缩放时选择的区域的背景突出显示

请参阅以下工作片段，该片段使用变异观察者来检测缩放，
并更改选择框的颜色......

＆＃13;

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

＆＃13;

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

＆＃13;

谷歌图表（AreaChart）如何检测缩放变化

1 个答案: