自定義縮放到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上創建了一個工作示例。