Javascript 缩放和平移谷歌折线图
这是一个关于Javascript 缩放和平移谷歌折线图,javascript,charts,google-visualization,Javascript,Charts,Google Visualization,这是一个关于google.visualization.LineCHart和explorer选项的非常直接的问题 问题: 有没有办法监听（或设置）图表放大/缩小时触发的事件 案例 我希望允许我的用户使用所有三个选项.explorer.actions以下特定规则： 缩小图表时，dragToZoom已启用 放大图表时，dragToPan和right clicktoreset已启用 最终行为 因此，用户只能放大一次，然后可以来回平移并重置 放大图表后，我想交换explorer.action值以更改图
google.visualization.LineCHartexplorer选项.explorer.actions- 缩小图表时，
已启用dragToZoom - 放大图表时，
和dragToPan
已启用right clicktoreset
explorer.action
谷歌可视化API示例
setOnLoadCallback（drawVisualization）；
风险值数据={
“cols”：[{“类型”：“日期”，“角色”：“域”}，{“类型”：“编号”，“角色”：“数据”}]，
“行”：[
[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],
]
};
函数drawVisualization（）{
var table=new google.visualization.DataTable（）；
forEach（函数（v，i，a）{a[i][0]=新日期（v[0]，0）；}）；
表.addColumn（data.cols[0]）；
表.addColumn（data.cols[1]）；
table.addRows（data.rows）；
var wrap=new google.visualization.ChartWrapper({
“图表类型”：“线条图”，
“集装箱运输”：“可视化”，
“数据表”：表，
“选择”：{
“标题”：“人口密度”，
“图例”：“无”，
“宽度”：1000，
“高度”：600，
“探索者”：{
“操作”：[“绘图空间”，“右键单击设置”]，
“maxZoomIn”：0.2，
“maxZoomOut”：1.0，
“zoomDelta”：10，
“轴”：“水平”，
“keepInBounds”：正确
},
“动画”：{
“持续时间”：1.5，
“启动”：错误，
“宽松”：“线性”
}
}
});
google.visualization.events.addListener（wrap，'ready'，onReady.bind（wrap））；
wrap.draw（）；
函数onReady（）{
var chart=this.getChart（）；
//以某种方式附加一个事件，用于侦听图表更改缩放
//剩下的我都知道怎么做了
}
}
MutationObserver<!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>