这是关于options.explorer.actions和dragToZoom选项的非常直接的问题。
是否有某种方法可以收听（或设置）在图表放大/缩小时触发的事件？
我想允许我的用户按照某些规则使用dragToPan中的所有三个：
rightClickToReset 启用 explorer.action和<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Google Visualization API Sample</title>
<script type="text/javascript" src='https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1"}]}'></script>
<script type="text/javascript">
google.setOnLoadCallback(drawVisualization);
var data = {
"cols": [{"type":"date","role":"domain"},{"type":"number","role":"data"}],
"rows": [
[1980,117.0],[1981,137.0],[1982,142.0],[1983,198.0],[1984,336.0],[1985,117.0],[1986,137.0],[1987,142.0],[1988,198.0],[1989,336.0],
[1990,117.0],[1991,137.0],[1992,142.0],[1993,198.0],[1994,336.0],[1995,117.0],[1996,137.0],[1997,142.0],[1998,198.0],[1999,336.0],
[2000,117.0],[2001,137.0],[2002,142.0],[2003,198.0],[2004,336.0],[2005,117.0],[2006,137.0],[2007,142.0],[2008,198.0],[2009,336.0],
]
};
function drawVisualization() {
var table = new google.visualization.DataTable();
data.rows.forEach(function(v,i,a){a[i][0]=new Date(v[0],0);});
table.addColumn(data.cols[0]);
table.addColumn(data.cols[1]);
table.addRows(data.rows);
var wrap = new google.visualization.ChartWrapper({
"chartType": "LineChart",
"containerId": "visualization",
"dataTable" : table,
"options": {
"title": "Population Density",
"legend": "none",
"width" : 1000,
"height" : 600,
"explorer" : {
"actions" : ["dragToZoom","rightClickToReset"],
"maxZoomIn" : 0.2,
"maxZoomOut" : 1.0,
"zoomDelta" : 10,
"axis" : "horizontal",
"keepInBounds" : true
},
"animation" : {
"duration" : 1.5,
"startup" : false,
"easing" : "linear"
}
}
});
google.visualization.events.addListener(wrap,'ready',onReady.bind(wrap));
wrap.draw();
function onReady () {
var chart = this.getChart();
// somehow attach an event that listens to the chart changing the zoom
// I would know how to do the rest
}
}
</script>
</head>
<body>
<div id="visualization"></div>
</body>
</html>
启用 因此，用户只能放大一次，然后他可以平移并重置。
图表放大后，我想交换api.details值来改变图表的行为。
.state('details', {
url: "/movieDetails/:id",
templateUrl: "/movieDetails.html"
});