Dygraphs 滚动图表

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第19天，点击查看活动详情

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

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

** Dygraph.Interaction.startPan(event, g, context)**：调用此回调函数以启动默认的平移的交互模式。这个方法用于 mousedown 操作中。自定义交互模式构建器可以使用它来提供默认的平移行为。其相关的参数如下：

代码语言：txt复制

- **{Event} event**：导致 `startPan` 开始平移调用的事件对象。
- **{Dygraph} g**：`Dygraph` 对象。
- **{Object} *_context_***：上下文对象。拖动上下文对象（具有 `dragStartX/dragStartY` 等属性）。** Dygraph.Interaction.movePan(event, g, context)**：调用此函数以操作响应平移视图的事件。这个方法用于

代码语言：txt复制

- **{Event} event**：导致 `movePan` 开始平移调用的事件对象。
- **{Dygraph} g**：`Dygraph` 对象。
- **{Object} *_context_***：上下文对象。同上 **startPan**。** Dygraph.Interaction.endPan(event, g, context)**：调用此函数以操作响应平移视图的事件。这个方法用于

代码语言：txt复制

- **{Event} event**：导致 `endPan` 开始平移调用的事件对象。
- **{Dygraph} g**：`Dygraph` 对象。
- **{Object} *_context_***：上下文对象。同上 **startPan**。

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

代码语言：javascript复制

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 来实现。

文末留一个问题：

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

angularjs

0 人点赞

Dygraphs 滚动图表

​