Dygraphs 动态更新

Jimmy
904 阅读2分钟

玩过基金或者股票的读者应该比较清楚数据的动态更新，当一有数据更改的时候，相关的折线图就会更新。

读者自行脑补效果

我们在本文来探讨下，Dygraphs 中如何进行数据的更新。

这是一个简单的事情，我们直接调用 updateOptions 方法即可。

updateOptions

updateOptions(input_attrs, block_redraw) 可更改图形的各种属性。这些属性包括：

  • file：更改图形的原数据。
  • errorBars：改变数据是否包含 stddev

stddev (standard deviation) 标准差

可以传递很多的选项给这个方法。完整的列表，我们可以查看这里。

该方法相关的参数介绍：

  • input_attrs 是 { Object } 类型，包含各种新的属性及其值。
  • block_redraw 是 { boolean } 类型，字面意思是阻止重绘。通常在每次调用 updateOptions() 后重新绘制图表。如果你明确知道哪里需要阻止重绘，你可以传递 true 来显式地组织重绘。这对于追踪 updateOptions() 调用很有帮助，可以避免偶尔的无限循环以及不必要的的重绘（比如更新一个回调函数时）。

上面讲了这么多，我们来实现下：

这里是结合 angular-cli 实现的 Demo。PS：掘金的线上编辑器啥时候能实现 angular 新建代码片段...期待😚

no_angular.png

实现

<div style="width: 600px; height: 300px;" #chart></div>

初始化的代码如下：

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

import Dygraph from 'dygraphs';

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.scss']
})
export class WelcomeComponent implements OnInit, AfterViewInit {

  @ViewChild('chart') chartRef: ElementRef | undefined;

  public dygraph: any = null;
  public fileData: Array<any> =[];
  


  constructor() { }

  ngOnInit() { }

  ngAfterViewInit() {
    if(this.chartRef) {
      this.fileData = this.generateData();
      this.dygraph = new Dygraph(
        this.chartRef.nativeElement,  // containing div
        this.fileData,
        {},
      );
    }
  }

  // 生成已有的数据
  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;
  }

}

其效果图如下：

init_graph_effect.png

因为数据是随机生成，所以我们得到的每张图都是不一样的

我们模拟数据，看看动态的效果：

  ngAfterViewInit() {
    if(this.chartRef) {
      // ... 上面 👆 的相关代码
      // 调用模拟数据
      this.mockData();
    }
  }
  // 模拟数据
  public mockData(): void {
    // onDestroy 的时候释放 timer
    this.timer = setInterval(() => {
      let x = new Date();
      let y = Math.random();
      this.fileData.push([x, y]);
      this.dygraph.updateOptions({
        file: this.fileData
      });
    }, 1 * 1000);
  }

效果 GIF 图如下：

demo.gif

我们在 updateOptions 的时候，只是更新了 file 这个数据的信息，当然你还可以更新它的其他数据，比如监听 drawCallback 函数。

this.dygraph.updateOptions({
  file: this.fileData,
  drawCallback: (dygraph: any, is_initial: any) => {
    console.log(dygraph, is_initial);
    // 相关的逻辑处理
  }
});

当然，我们上面只是简单展示了，我们可以动态更改图表。那么我们提出一个问题延伸一下：

如何规定在时间区间内图形发生变动，而不是像上图那样一更新数据图形就左移呢？

感兴趣的读者可以实现下。

往期精彩推荐

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

avatar
文章
阅读
粉丝