如何在dygraph的范围选择器中设置默认选中区间

dygraph默认选中范围设置方法 #

dygraph官方提供dateWindow配置项实现该需求，无需额外自定义逻辑，配置方式如下：

• 配置参数说明：dateWindow接收长度为2的数组，两个值分别对应选中范围的左边界时间值和右边界时间值，数值类型需要和你x轴传入的时间类型保持一致（若x轴为毫秒时间戳就传时间戳，为日期对象就传日期对象）。

初始化时设置默认范围示例 #

// 示例：默认选中最近30天的时间范围
const rightBoundary = Date.now();
const leftBoundary = rightBoundary - 30 * 24 * 60 * 60 * 1000;

new Dygraph(
  document.getElementById("chart-container"),
  yourChartData,
  {
    showRangeSelector: true,
    // 核心配置项
    dateWindow: [leftBoundary, rightBoundary],
    // 其余原有配置保持不变
    // ...
  }
);

初始化后动态修改选中范围 #

如果图表已经渲染完成需要调整选中范围，调用updateOptions方法即可：

// g为dygraph实例对象
g.updateOptions({
  dateWindow: [newLeftValue, newRightValue]
});

配置生效后范围选择器会自动选中对应区间，不会影响其他交互逻辑。

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