Dygraphs 动态更新

·  阅读 560
Dygraphs 动态更新

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

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

读者自行脑补效果

我们在本文来探讨下,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);
    // 相关的逻辑处理
  }
});
复制代码

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

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

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

往期精彩推荐

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

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改