Dygraphs 滚动图表
Dygraphs 滚动图表
Jimmy_is_jimmy
发布于 2022-09-22 11:21:57
发布于 2022-09-22 11:21:57
携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第19天，点击查看活动详情
本文我们来谈谈在 Dygraphs 中实现图表的滚动，我们还是将 Dygraphs 和 angular 结合起来使用。
我们将用到下面的三个方法：
- ** Dygraph.Interaction.startPan(event, g, context)**：调用此回调函数以启动默认的平移的交互模式。这个方法用于
mousedown操作中。自定义交互模式构建器可以使用它来提供默认的平移行为。其相关的参数如下：
- **{Event} event**：导致 `startPan` 开始平移调用的事件对象。
- **{Dygraph} g**：`Dygraph` 对象。
- \*\*{Object} \*_context_\*\*\*：上下文对象。拖动上下文对象（具有 `dragStartX/dragStartY` 等属性）。** Dygraph.Interaction.movePan(event, g, context)**：调用此函数以操作响应平移视图的事件。这个方法用于 - **{Event} event**：导致 `movePan` 开始平移调用的事件对象。
- **{Dygraph} g**：`Dygraph` 对象。
- \*\*{Object} \*_context_\*\*\*：上下文对象。同上 **startPan**。** Dygraph.Interaction.endPan(event, g, context)**：调用此函数以操作响应平移视图的事件。这个方法用于 - **{Event} event**：导致 `endPan` 开始平移调用的事件对象。
- **{Dygraph} g**：`Dygraph` 对象。
- \*\*{Object} \*_context_\*\*\*：上下文对象。同上 **startPan**。了解上面的内容之后，我们来实现相关的效果。我们结合 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来实现。
文末留一个问题：
如果我们在平移的时候更新数据，那会是怎么操作呢？
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-08-14，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录