Javascript 自定义谷歌折线图缩放

我正在使用

dragToZoom

explorer函数将缩放功能添加到我的折线图中

explorer: { 
    actions: ['dragToZoom', 'rightClickToReset'],
    axis: 'horizontal',
    keepInBounds: true,
    maxZoomIn: 4.0
}

举个例子

我还想添加一个自定义缩放，用户可以在其中选择开始日期，图表将缩放到期间[开始日期；当前日期]

我看到它提供了一个名为

setVisibleChartRange（start，end）

的方法，可以做到这一点。但是，我在我的应用程序上尝试了它们，它们不像（图例、边框等）那样令人愉悦和可定制

---

有没有办法更改折线图上的可见范围？

不使用注释图表的最佳方法是按照WhiteHat的提示添加注释并更改其状态

正如Google Developers中提到的，更改状态后需要调用

draw（）

方法：

经验法则是直接在特定的

ControlWrapper

（或

ChartWrapper

）实例上执行所需的任何更改：例如，分别通过

setOption（）

和

setState（）

更改控件选项或状态，然后调用其

draw（）

方法

---

我在上创建了一个工作示例

您可以使用来筛选任何图表--

ChartRangeFilter

类似于

AnnotationChart

底部的控件--

DateRangeFilter

也可用…@WhiteHat我见过这些控件。

ChartRangeFilter

是最接近应用程序需要的过滤器。您认为我可以通过编程方式更改其状态属性中的

range.start

和

range.end

吗？当然，可以使用

setState

方法-->

filter.setState（{range:{start:a，end:b}）

太好了！非常感谢你。

var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));

var chart = new google.visualization.ChartWrapper({
    chartType: 'ComboChart',
    containerId: 'chart_div',
    options: {
        legend: { 
          position: 'bottom', 
          alignment: 'center', 
          textStyle: {
            fontSize: 12
          }
      },
      explorer: {
          actions: ['dragToZoom', 'rightClickToReset'],
          axis: 'horizontal',
          keepInBounds: true
      },
      hAxis: {
          title: 'X'
      },
      pointSize: 3,
      vAxis: {
          title: 'Y'
      }
  }
});

var control = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control_div',
    options: {
        filterColumnIndex: 0,
        ui: {
            chartOptions: {
                height: 50,
                chartArea: {
                    width: '75%'
                }
            }
        }
    }
});

dash.bind([control], [chart]);

dash.draw(data);

// example of a new date set up
setTimeout(function () {        
    control.setState({range: {
        start: new Date(2016, 6,1),
      end: new Date()
  }});
  control.draw();
}, 3000);