Google Charts（AreaChart）如何檢測縮放變化

我正在繪製一個AreaChart，疊加層上有一些標記。Google Charts（AreaChart）如何檢測縮放變化

我正在使用explorer選項（僅限水平）以便讓用戶放大和縮小。問題是，我無法找到一種方式來通知縮放變化，以便有機會更新制造商的立場。有一個圖表rangechange事件，但它不是由AreaChart觸發的。

我試圖檢測常見onmousewheel/onwheel事件，和ondragstart/ondragend事件，但：

1）onmousewheel /圖表縮放之前，而不是之後onwheel進行燒成，所以標記的重新定位可以不一致計算

2）ondragstart/ondragend不是由圖表元素觸發的，當放大後，用戶拖動左側或右側圖表內容，以便移動它，所以再次沒有機會重新開始，位置標記

任何人都可以幫忙嗎？

來源

2016-11-04 Giorgio Barchiesi

而不是依賴於事件檢測變焦改變

使用突變觀察者，當元件已經被加入到該圖表容器，其將通知

每一個變焦發生時，元件是添加到圖表
如背景突出顯示的區域時選擇的區域放大

請參閱以下工作片段，它使用突變觀察版本檢測變焦，
和改變選擇框的顏色...

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>

來源

2016-11-04 11:55:55 WhiteHat

肯定它幫助，謝謝！ –

Google Charts（AreaChart）如何檢測縮放變化

回答

相關問題