dygraphs中是否有显示Y轴范围选择器的配置选项？

首先得明确说：dygraphs原生并没有内置专门的Y轴范围选择器，默认的showRangeSelector: true确实只支持X轴的范围筛选功能。不过咱们可以通过自定义控件结合dygraphs的API来实现类似的效果，下面给你两种实用的思路：

1. 自定义滑块控件（最直观的方案） #

你可以在图表旁边添加HTML滑块或者输入框，监听控件的变化事件，然后调用dygraphs的updateOptions()方法动态修改Y轴的范围。

举个简单的示例：

<!-- 先添加一个Y轴范围控制的滑块 -->
<div>
  <label>Y轴范围调整：</label>
  <input type="range" id="yRangeSlider" min="0" max="100" value="50" step="1">
</div>
<!-- 图表容器 -->
<div id="graph"></div>

<script>
// 初始化dygraphs图表
const g = new Dygraph(
  document.getElementById('graph'),
  [
    [1, 10], [2, 20], [3, 30], [4, 40], [5, 50],
    [6, 60], [7, 70], [8, 80], [9, 90], [10, 100]
  ],
  {
    showRangeSelector: true, // 启用X轴范围选择器
    valueRange: [0, 100] // 初始Y轴范围
  }
);

// 监听滑块变化，更新Y轴范围
document.getElementById('yRangeSlider').addEventListener('input', function(e) {
  const maxY = parseInt(e.target.value);
  g.updateOptions({
    valueRange: [0, maxY] // 这里可以根据需求调整最小值和最大值的逻辑
  });
});
</script>

这个例子里，滑块控制Y轴的最大值，你也可以扩展成两个滑块分别控制最小值和最大值，实现更灵活的范围选择。

2. 利用图表交互事件实现 #

如果不想额外加控件，也可以监听dygraphs的鼠标事件（比如滚轮、拖拽）来调整Y轴范围，但这种方式的直观性不如自定义控件。比如监听zoom事件，或者自己处理鼠标拖拽逻辑来修改valueRange。

不过整体来说，自定义控件的方案更符合用户对“范围选择器”的预期，实现起来也更简单可控。

内容的提问来源于stack exchange，提问作者user9348127