Google图表（AreaChart）如何检测缩放变化 [英] Google Charts (AreaChart) how to detect zoom change

问题描述

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

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

我正在使用资源管理器选项（仅水平），以便用户放大和缩小。
问题是我无法找到一种方法来通知缩放比例发生变化，从而有机会更新制造商排名。有一个 rangechange 图表事件，但没有被AreaChart触发。

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.

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

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

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

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

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

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

任何人都可以帮忙吗？

推荐答案

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

使用突变观察器，它将通知将元素添加到图表容器

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

每次出现 zoom 时，元素都会添加到图表

例如所选区域的背景高亮显示放大

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>

这篇关于Google图表（AreaChart）如何检测缩放变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！