玩过基金或者股票的读者应该比较清楚数据的动态更新,当一有数据更改的时候,相关的折线图就会更新。
读者自行脑补效果
我们在本文来探讨下,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);
// 相关的逻辑处理
}
});
当然,我们上面只是简单展示了,我们可以动态更改图表。那么我们提出一个问题延伸一下:
如何规定在时间区间内图形发生变动,而不是像上图那样一更新数据图形就左移呢?
感兴趣的读者可以实现下。
往期精彩推荐
如果读者觉得文章还可以,不防一键三连:关注➕点赞➕收藏