范围选择器（rangeSelector）是图表中用于选择数据范围的工具，它提供了预配置的时间选择按钮，包括 1天，1周，1个月等，同时也提供时间输入框用于手动指定时间范围。

范围选择器

时间选择按钮

通过 rangeSelector.buttons 可以指定时间选择按钮，默认是

  1. buttons: [{
  2.     type: 'month',
  3.     count: 1,
  4.     text: '1m'
  5. }, {
  6.     type: 'month',
  7.     count: 3,
  8.     text: '3m'
  9. }, {
  10.     type: 'month',
  11.     count: 6,
  12.     text: '6m'
  13. }, {
  14.     type: 'ytd',
  15.     text: 'YTD'
  16. }, {
  17.     type: 'year',
  18.     count: 1,
  19.     text: '1y'
  20. }, {
  21.     type: 'all',
  22.     text: 'All'
  23. }]

其中 type 表示时间单位，可用的值有 millisecond、second、minute、hour、day、week、month、ytd（Year to Date，最近的一年）、all（全部） ；count 为数量，text 为按钮显示的文字。

通过 type 和 count 我们可以很灵活的组合时间范围。

默认选中

默认选中指的是图表显示的默认范围，我们可以通过 selected 属性来指定默认选中的时间范围按钮

  1. rangeSelector: {
  2.     buttons: [{ // 时间范围按钮数组
  4.     }],
  5.     selected: 1  // 默认选中的范围，值为上面 buttons 数组的下标（从 0 开始）
  6. }

时间输入框

时间输入框包含两个 Input 输入框，其值为当前图表的时间范围，我们可以通过 inputDateFormat 和 inputEditDateFormat 来指定输入框显示状态和输入状态的时间格式。

如果不需要时间输入框，可以设置 inputEnabled = false 来关闭输入框。

范围选择器相关事件

范围选择器改变的范围其实是对坐标轴改变范围，所以如果需要监听范围选择器事件，我们可以通过坐标轴的相关事件来处理，下面是示例代码：

  1. xAxis: {
  2.     events: {
  3.         // 范围选择器改变的范围最终是改变坐标轴的范围，所以我们监听坐标的极值变更事件函数即可
  4.         afterSetExtremes: function(e) {
  5.             // e.min 和 e.max 为坐标轴当前的范围
  6.             console.log(e.min, e.max);
  7.         }
  8.     }
  9. }

常见问题

1. 如何使 rangeSelector 生效，但是不显示对应的 按钮和文字

请参考示例代码：

  1. Highcharts.setOptions({
  2.     lang: {
  3.         rangeSelectorZoom: '' // 不显示 'zoom' 文字
  4.     }
  5. })
  7. $('#container').highcharts('Stock', {
  9.     // ... 省略代码
  10.     rangeSelector: {
  11.         buttonTheme: {
  12.             display: 'none' // 不显示按钮
  13.         },
  14.         selected: 1,
  15.         inputEnabled: false // 不显示日期输入框
  16.     }
  17. });

出自帖子：关于 Highstock 的一些小技巧

2. 如何在外部触发时间范围按钮

可以调用 rangeSelector.clickButton 函数，该函数是内部未公开的函数，通过阅读源码得知。

在线试一试

原文: https://www.hcharts.cn/docs/range-selector