Javascript 谷歌图表：如何在面积图上添加缩放按钮

我想在区域图的顶部添加缩放按钮，如AnnotationChart。我也在寻找同样的答案，但没有找到答案。谁能告诉我解决办法吗？ 我需要这样的按钮：

---

谢谢

您必须手动添加按钮，
单击时，使用

state

属性在范围过滤器上设置可见范围

  rangeFilter.setState({
    range: {
      start: currentRange.range.start,
      end: new Date(currentRange.range.start.getTime() + visibleRange)
    }
  });

请参阅以下工作片段，
每个按钮以毫秒为单位表示可见范围，
单击时，在过滤器上设置范围

google.charts.load（'current'{
包：['controls'，'corechart']
}).然后（函数（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'date'，'date'）；
data.addColumn（'number'，'Positive'）；
data.addColumn（'number'，'Negative'）；
data.addRows([
[新日期（2017年11月20日），10日，无效]，
[新日期（2017年11月21日），5日，无效]，
[新日期（2017年11月22日），0,0]，
[新日期（2017年11月23日），空，-5]，
[新日期（2017年11月24日），空，-10]，
[新日期（2017年11月25日），空，-5]，
[新日期（2017年11月26日），0,0]，
[新日期（2017年11月27日），10日，无效]，
[新日期（2017年11月28日），5日，无效]，
[新日期（2017年11月29日），0,0]，
[新日期（2018年0月20日），00，空]，
[新日期（2018年0月21日），5日，空]，
[新日期（2018,0,22），0,0]，
[新日期（2018年0月23日），空，-5]，
[新日期（2018年0月24日），空，-10]，
[新日期（2018年0月25日），空，-5]，
[新日期（2018,0,26），0,0]，
[新日期（2018年0月27日），00，空]，
[新日期（2018年0月28日），5日，空]，
[新日期（2018,0,29），0,0]，
[新日期（2018年1月20日），10日，空]，
[新日期（2018年1月21日），5日，无效]，
[新日期（2018年1月22日），0,0]，
[新日期（2018年1月23日），空，-5]，
[新日期（2018年1月24日），空，-10]，
[新日期（2018年1月25日），空，-5]，
[新日期（2018年1月26日），0,0]，
[新日期（2018年1月27日），10日，无效]，
[新日期（2018年1月28日），5日，无效]，
[新日期（2018年1月29日），0,0]，
[新日期（2018年2月20日），10日，空]，
[新日期（2018年2月21日），5日，无效]，
[新日期（2018年2月22日），0,0]，
[新日期（2018年2月23日），空，-5]，
[新日期（2018年2月24日），空，-10]，
[新日期（2018年2月25日），空，-5]，
[新日期（2018年2月26日），0,0]，
[新日期（2018年2月27日），10日，无效]，
[新日期（2018年2月28日），5日，无效]，
[新日期（2018年2月29日），0,0]，
[新日期（2018年3月20日），10日，无效]，
[新日期（2018年3月21日），5日，无效]，
[新日期（2018年3月22日），0,0]，
[新日期（2018年3月23日），空，-5]，
[新日期（2018年3月24日），空，-10]，
[新日期（2018年3月25日），空，-5]，
[新日期（2018年3月26日），0,0]，
[新日期（2018年3月27日），10日，无效]，
[新日期（2018年3月28日），5日，无效]，
[新日期（2018年3月29日），0,0]，
[新日期（2018年4月20日），10日，无效]，
[新日期（2018年4月21日），5日，无效]，
[新日期（2018年4月22日），0,0]，
[新日期（2018年4月23日），空，-5]，
[新日期（2018年4月24日），空，-10]，
[新日期（2018年4月25日），空，-5]，
[新日期（2018年4月26日），0,0]，
[新日期（2018年4月27日），10日，无效]，
[新日期（2018年4月28日），5日，无效]，
[新日期（2018年4月29日），0,0]，
[新日期（2018年5月20日），10月10日，空]，
[新日期（2018年5月21日），5月5日，无效]，
[新日期（2018年5月22日），0,0]，
[新日期（2018年5月23日），空，-5]，
[新日期（2018年5月24日），空，-10]，
[新日期（2018年5月25日），空，-5]，
[新日期（2018年5月26日），0,0]，
[新日期（2018年5月27日），10日，无效]，
[新日期（2018年5月28日），5月5日，无效]，
[新日期（2018年5月29日），0,0]，
[新日期（2018年6月20日），10日，空]，
[新日期（2018年6月21日），5日，无效]，
[新日期（2018年6月22日），0,0]，
[新日期（2018年6月23日），空，-5]，
[新日期（2018年6月24日），空，-10]，
[新日期（2018年6月25日），空，-5]，
[新日期（2018年6月26日），0,0]，
[新日期（2018年6月27日），10日，无效]，
[新日期（2018年6月28日），5日，无效]，
[新日期（2018年6月29日），0,0]，
[新日期（2018年9月20日），10日，空]，
[新日期（2018年9月21日），5日，无效]，
[新日期（2018年9月22日），0,0]，
[新日期（2018年9月23日），空，-5]，
[新日期（2018年9月24日），空，-10]，
[新日期（2018年9月25日），空，-5]，
[新日期（2018年9月26日），0,0]，
[新日期（2018年9月27日），10日，无效]，
[新日期（2018年9月28日），5日，无效]，
[新日期（2018年9月29日），0,0]，
[新日期（2018年11月20日），10日，无效]，
[新日期（2018年11月21日），5日，无效]，
[新日期（2018年11月22日），0,0]，
[新日期（2018年11月23日），空，-5]，
[新日期（2018年11月24日），空，-10]，
[新日期（2018年11月25日），空，-5]，
[新日期（2018年11月26日），0,0]，
[新日期（2018年11月27日），10日，无效]，
[新日期（2018年11月28日），5日，无效]，
[新日期（2018年11月29日），0,0]，
]);
var rangeFilter=new google.visualization.ControlWrapper({
controlType:“ChartRangeFilter”，
containerId:“筛选器范围”，
选项：{
filterColumnIndex:0，
用户界面：{
图表类型：“区域图表”，
图表选项：{
图表区：{
宽度：“100%”，
左：36，
右：18
},
身高：72
}
}
}
});
var chart=new google.visualization.ChartWrapper({
图表类型：“区域图表”，
集装箱：“海图区域”，
选项：{
身高：280，
图例：{
对齐：“结束”，
位置：'顶部'
},
动画：{
持续时间：500，
“在”，
启动：正确
},
图表区：{
高度：“100%”，
宽度：“100%”，
排名：36，
左：36，
右：18，
底数：36
}
}
});
$（“#范围按钮”）。在（'click'，函数（发送方）{
var currentRange=rangeFilter.getState（）；
var visibleRange=parseInt（$（sender.target）.data（'range'）；
if（isNaN（可视范围））{
rangeFilter.setState（空）；
}否则{
rangeFilter.setState({
范围：{
开始：currentRange.range.start，
结束：新日期（currentRange.range.start.getTime（）+visibleRange）
}
});
}
rangeFilter.draw（）；
});
var仪表板=
var options = {
    ...
    chart: {
            areaOpacity: 0.3
           }
}