自定义缩放到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上创建了一个工作示例.