Dygraph 中 Range Selector 的监听更改

Jimmy_is_jimmy

发布于 2023-07-09 15:00:14

1530

发布于 2023-07-09 15:00:14

文章被收录于专栏：call_me_R

之前文章 Dygraph 结合 Angular 实现多图表同步中，在文末我们留了一个疑问，更多的操作解锁?

这里我们添加 Range Selector 并进行同步～

添加 Range Selector 支持

Dygraph.onDOMready(() => {
  let that = this;
  this.timeline = new Dygraph(
    this.domTimeline, // timeline 的 dom 节点
    timelineData, // 相关的数据
    {
      labels: ['Date', 'Value'],
      axes: {
        x: {
          drawGrid: false, // 不展示网格
          axisLabelFormatter: function(date: Date) {
            return moment(date.valueOf()).format('MM/DD[-]HH:mm:ss'); // 格式化 X 轴，目前是时间值
          }
        },
        y: {
          axisLabelWidth: 50,
          axisLabelFormatter: () => {
            return '' // format as what you want
          }
        }
      },
      showRangeSelector: true, // 重点 -> 展示 Range Selector
      dateWindow: [new Date(that.timeFrameRange[0]), new Date(that.timeFrameRange[1])], // 重点 -> 展示的区间
    }
  );
})

代码即文档，上面添加了 showRangeSelector 为 true，告诉 Dygraph 我们要使用 Range Selector 功能了，请展示出来；然后我们设定了展示的区间 dateWindow。

那么，我们在滑动的过程中，需要对滑块进行滑动，或者监听范围的改动，我们应该怎么做呢？

使用 zoomCallback

zoomCallback 监听两侧滑块的更改值。

Dygraph.onDOMready(() => {
  let that = this;
  this.timeline = new Dygraph(
    this.domTimeline,
    timelineData,
    {
      showRangeSelector: true, // 重点 -> 展示 Range Selector
      dateWindow: [new Date(that.timeFrameRange[0]), new Date(that.timeFrameRange[1])], // 重点 -> 展示的区间
      zoomCallback: function(minDate, maxDate) { // 缩放回调函数
        that.timeframeRange = [minDate, maxDate];
      },
    }
  );
})

该函数 zoomCallback 函数的参数有三个：

类型: function(minDate, maxDate, yRanges)
- minDate: 开始控件对应的值 milliseconds 
- maxDate: 结束控件对应的值 milliseconds
- yRanges: 每个 y-axis 的一个 [bottom, top] 数组对

那么，我们需要移动整个选中控件，起始点和结束点控件的值却没有发生改变，这个时候，如果要获取，我们应该如何操作呢？

使用 xAxisRange() 方法

这个方法 xAxisRange() 返回了起始点和结束点控件的值。我们假设手动触发了获取起始点和结束点控件值的事件 triggerRangeSelector，如下代码展示：

public triggerRangeSelector(): void {
  let that = this;
  let currentRanges: any = that.timelineGraph.xAxisRange();
  this.timeframeRange[0] = (typeof currentRanges[0] === 'object') ? currentRanges[0].valueOf() : currentRanges[0];
    this.timeframeRange[1] = (typeof currentRanges[1] === 'object') ? currentRanges[1].valueOf() : currentRanges[1];
    let differentTimestamp: number = this.timeframeRange[1] - this.timeframeRange[0];
    this.timelineGraph.updateOptions({ // 更新选中的 dateWindow
      dateWindow: [new Date(that.timeframeRange[0]), new Date(that.timeframeRange[1])]
    })
}

感兴趣的读者可以进行尝试验证下～

进行同步 Range Selector 的功能，读者直接参考文章 Dygraph 结合 Angular 实现多图表同步即可。