自定义缩放到Google折线图

Question

我正在使用dragToZoom资源管理器功能为我的折线图添加缩放功能。

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

这里的小提琴示例。

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

我看到Annotation Charts提供了一个名为setVisibleChartRange(start, end) ，可以做到这一点。 但是，我在我的应用程序上尝试了它们，它们不像Line Charts那样令人愉悦和可定制（传说，边框等）。

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

Answer 1

不使用注释图表的最佳方法是遵循WhiteHat对注释的提示，添加CharRangeFilter并更改其状态。

如Google Developers 页面中所述 ，需要在更改状态后调用draw()方法：

经验法则是直接在特定的ControlWrapper （或ChartWrapper ）实例上执行您需要的任何更改：例如，分别通过setOption()和setState()更改控件选项或状态，然后调用其draw()方法。

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);

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