Dygraphs 中 x 轴等间距实现
实现 间距
2023-06-13 09:13:00 时间
本文,我们来探讨下,如何在 Dygraphs
中的 X
轴上等间距的展示每一条竖线,间隔是 1s
,如上图。
我们的思路是怎样的呢?
在 Dygraphs
中没有相关的 api
直接调用,但是我们发现了这么一个属性 pixelsPerLabel
属性。
pixelsPerLabel
表明x
轴或者y
轴标签之间的宽度。(可以理解为控制轴两点之间的距离)单位是px
。
So,我们下面就有思路了,我们只针对 x
轴来实现(y
轴同理,感兴趣的读者可以自行实现):
- 计算
chart
容器的宽度chartWidth
,单位是px
- 用户选中填充容器的时间是
t
毫秒 - 取
x
两点直接的距离distance
,单位是px
,则有distance = (chartWidth / t / 2) * 1000
⚠️ 对于为什么
除以2
,了解的读者可以留言交流下。经过测试/2
能满足
相关实现的核心代码如下:
let options: any = {
axes: {
x: {
pixelsPerLabel = (this.chartWidth / this.t / 2) * 1000
}
}
}
// 不存在 Dygraph 对象的情况下,新建 Dygraph 对象
if(!this.dygraph) {
this.dygraph = new Dygraph(this.chart, this.data, options);
} else { // 存在 Dygraph 对象的情况下,只需要更新数据就行了
this.dygraph.updateOptions(options);
}
到这里为止,我们已经是实现了相关的功能。但是,我们也仅仅是实现了粗糙的功能而已。我们还需要考虑下面的问题:
1. 当浏览器缩放,我们怎么处理
针对浏览器的缩放,进行一个监听 addEventListener
,重新绘制图形,这是一个不错的选择。在 angular
中,我们一般选择 @HostListener
进行调用。
@HostListener('window:resize')
private onResize(): void {
this.drawChart(); // 重新绘制
}
2. 当我们需要动态选择时间,我们怎么存储数据
当我们再次进入浏览器的时候,我们希望直接使用之前设置好的时间模式展示。那么,我们就需要用到浏览器的缓存技术 localStorage
。将关键的信息存放起来,下次进来的时候,先判断时候已经调试好,如果调试好,直接使用缓存,如果未调试好,直接让用户调试。这样做的好处是:减少用户参与的动作,也就是所谓的提升用户体验。
相关文章
- 数据透视表上线!如何在纯前端实现这个强大的数据分析功能?
- CSS实现三列图片等宽等间距布局详解编程语言
- Vue数据双向绑定原理及简单实现详解编程语言
- LRU算法的Java实现详解编程语言
- 的实现Oracle序列的实现:一步一步探索(oracle当前序列)
- MySQL实现时间获取的函数简介(mysql获取时间的函数)
- 轻松搞定!Linux系统如何实现中文输入切换(linux切换中文输入)
- MySQL实现跨库事务的实用技巧(mysql跨库事务)
- MSSQL实现跨库连接的技巧与实现(mssql 跨库连接)
- Oracle 数据库实现先排序后分页(oracle先排序再分页)
- 重构网络Redis实现高可用与高并发(redis高可用高并发)
- Oracle中字符串的乘法实现(oracle中字符乘法)
- 利用Redis锁实现安全的数据存储(redis锁数据结构)
- Redis实现操纵二进制数据的功能(redis读取二进制数据)
- Oracle数据库任务自动化实现系统极速部署(oracle dbjob)
- php中实现记住密码自动登录的代码
- 对象失去焦点时自己动提交数据的实现代码
- k均值算法c++语言实现代码
- .net实现序列化与反序列化实例解析