chartarea缩放_Google图表（AreaChart）如何检测缩放变化

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

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.

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

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

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

Can anyone help?

解决方案

rather than relying on events to detect zoom change

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

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']

});