Dygraphs 滚动图表

本文我们来谈谈在 Dygraphs 中实现图表的滚动，我们还是将 Dygraphs 和 angular 结合起来使用。

我们将用到下面的三个方法：

Dygraph.Interaction.startPan(event, g, context)：调用此回调函数以启动默认的平移的交互模式。这个方法用于 mousedown 操作中。自定义交互模式构建器可以使用它来提供默认的平移行为。其相关的参数如下：
- {Event} event：导致 startPan 开始平移调用的事件对象。
- {Dygraph} g：Dygraph 对象。
- {Object} context：上下文对象。拖动上下文对象（具有 dragStartX/dragStartY 等属性）。
Dygraph.Interaction.movePan(event, g, context)：调用此函数以操作响应平移视图的事件。这个方法用于 mousemove 操作中。自定义交互模式构建起可以使用它来提供默认平移行为。其相关的参数如下：
- {Event} event：导致 movePan 开始平移调用的事件对象。
- {Dygraph} g：Dygraph 对象。
- {Object} context：上下文对象。同上 startPan。
Dygraph.Interaction.endPan(event, g, context)：调用此函数以操作响应平移视图的事件。这个方法用于 mouseup 操作中。自定义交互模式构建起可以使用它来提供默认平移行为。其相关的参数如下：
- {Event} event：导致 endPan 开始平移调用的事件对象。
- {Dygraph} g：Dygraph 对象。
- {Object} context：上下文对象。同上 startPan。

了解上面的内容之后，我们来实现相关的效果。我们结合 Dygraphs 动态更新文章的代码进行更改。其功能核心代码如下：

ngAfterViewInit() {
  if(this.chartRef) {
    this.fileData = this.generateData(); // 生成数据
    this.dygraph = new Dygraph(
      this.chartRef.nativeElement, // dom 节点
      this.fileData,
      {
        interactionModel: {
          mousedown: function(event: Event, g: any, context: any) {
            context.initializeMouseDown(event, g, context); // 初始化鼠标按下
            Dygraph.startPan(event, g, context); // 开始平移
          },
          mousemove: function(event: Event, g: any, context: any) {
            Dygraph.movePan(event, g, context); // 移动中
          },
          mouseup: function(event: Event, g: any, context: any) {
            Dygraph.endPan(event, g, context); // 结束平移
          }
        }
      },
    );
  }
}

// 生成已有的数据
public generateData(): Array<any> {
  let data = [];
  let time = new Date();
  for(let i = 10; i >= 0; i--) {
    let x = new Date(time.getTime() - i * 1000);
    data.push([x, Math.random()]);
  }
  return data;
}

感兴趣的读者自行复制代码进行效果验证。这里是结合 angular 实现，我们可以更改为自己熟悉的框架或者单纯使用传统的 javascript + html + css 来实现。

文末留一个问题：

如果我们在平移的时候更新数据，那会是怎么操作呢？

往期精彩推荐

如果读者觉得文章还可以，不防一键三连：关注➕点赞➕收藏