自定义缩放至 Google 折线图

Question

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

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

Fiddle 例子 here.

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

我看到 Annotation Charts offer a method called setVisibleChartRange(start, end) that could do it. However, I tried them on my application and they are not as view pleasing and customizable as Line Charts 是（图例、边框等）。

有什么方法可以改变折线图的可见范围吗？

Answer 1

不使用注释图表的最佳方法是按照 WhiteHat 在评论中的提示，添加 CharRangeFilter 并更改其状态。

如Google开发者page所述，改变状态后需要调用draw()方法：

The rule of thumb is to perform any change you need directly on the specific ControlWrapper (or ChartWrapper) instance: for example, change a control option or state via setOption() and setState() respectively, and call its draw() method afterward.

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 上创建了一个工作示例。

自定义缩放至 Google 折线图

Custom zoom to Google line chart

javascript

charts

linechart

google-visualization