javascript - 自定义缩放到Google折线图

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

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

小提琴示例here。

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

我看到Annotation Charts提供了一种称为setVisibleChartRange(start, end)的方法可以做到这一点。但是，我在应用程序上尝试了它们，但它们不像Line Charts(图例，边框等)那样令人愉悦且可自定义。

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

最佳答案

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

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

关于javascript - 自定义缩放到Google折线图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43368734/