携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第19天,点击查看活动详情
本文我们来谈谈在 Dygraphs
中实现图表的滚动,我们还是将 Dygraphs
和 angular
结合起来使用。
我们将用到下面的三个方法:
- Dygraph.Interaction.startPan(event, g, context):调用此回调函数以启动默认的平移的交互模式。这个方法用于
mousedown
操作中。自定义交互模式构建器可以使用它来提供默认的平移行为。其相关的参数如下:- {Event} event:导致
startPan
开始平移调用的事件对象。 - {Dygraph} g:
Dygraph
对象。 - {Object} context:上下文对象。拖动上下文对象(具有
dragStartX/dragStartY
等属性)。
- {Event} event:导致
- Dygraph.Interaction.movePan(event, g, context):调用此函数以操作响应平移视图的事件。这个方法用于
mousemove
操作中。自定义交互模式构建起可以使用它来提供默认平移行为。其相关的参数如下:- {Event} event:导致
movePan
开始平移调用的事件对象。 - {Dygraph} g:
Dygraph
对象。 - {Object} context:上下文对象。同上 startPan。
- {Event} event:导致
- Dygraph.Interaction.endPan(event, g, context):调用此函数以操作响应平移视图的事件。这个方法用于
mouseup
操作中。自定义交互模式构建起可以使用它来提供默认平移行为。其相关的参数如下:- {Event} event:导致
endPan
开始平移调用的事件对象。 - {Dygraph} g:
Dygraph
对象。 - {Object} context:上下文对象。同上 startPan。
- {Event} event:导致
了解上面的内容之后,我们来实现相关的效果。我们结合 Dygraphs 动态更新文章的代码进行更改。其功能核心代码如下:
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
来实现。
文末留一个问题:
如果我们在平移的时候更新数据,那会是怎么操作呢?
往期精彩推荐
如果读者觉得文章还可以,不防一键三连:关注➕点赞➕收藏