Dygraphs 动态更新

Jimmy_is_jimmy

发布于 2022-09-21 15:52:56

8340

发布于 2022-09-21 15:52:56

文章被收录于专栏：call_me_Rcall_me_R

携手创作，共同成长！这是我参与「掘金日新计划 · 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 新建代码片段...期待😚

实现

<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;
  }

}

其效果图如下：

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

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

  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 图如下：

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

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

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

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

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022-08-13，如有侵权请联系 cloudcommunity@tencent.com 删除

c++

angularjs

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

c++

angularjs

登录后参与评论

0 条评论

热度