自定义缩放Google折线图

Question

我一直在使用dragToZoom浏览器函数为我的折线图添加缩放功能。

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

这里有一个 JSFiddle 实例，点击此处查看。

我想添加一个自定义缩放功能，用户可以选择一个起始日期，然后图表会缩放到 [起始日期；当前日期] 这段时间内。

我发现注释图表提供了一个名为 setVisibleChartRange(start, end) 的方法来实现此功能。但是，在我的应用程序中尝试时，它们不如折线图美观和可定制（图例、边框等）。

是否有办法在折线图上更改可见范围？

- Hicaro

---

有一些控件可以用来过滤任何图表 -- ChartRangeFilter 类似于 AnnotationChart 底部的控件 -- DateRangeFilter 也可用... - WhiteHat

@WhiteHat 我已经看过这些控件了。ChartRangeFilter 是最接近应用程序需求的控件。您认为我能否通过编程方式更改其状态属性中的 range.start 和 range.end 值呢？ - Hicaro

当然，使用 setState 方法 --> filter.setState({range: {start: a, end: b}}) - WhiteHat

太好了！非常感谢。 - Hicaro

Answer 1

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

如Google Developers page所述，在更改状态后需要调用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 上创建了一个可运行的示例。

- Hicaro