Dygraph 模拟柱状图的绘制
在 Dygraph
中,如果我们想展示竖线的时候,我们应该怎么做呢?
一开始,想着直接手动 canvas
绘图?但是跟 Dygraph
上的默认行为,比如 hover
要做适配,很是麻烦。那么 Dygraph
中就没有实现的方法了?
直到我看到了官网中案例图:
呀呀呀~ 我们调整下数据结构,看看能否实现。
let data = [
[new Date('2023-01-01'), 1],
[new Date('2023-01-01'), 0],
[new Date('2023-01-01'), null],
[new Date('2023-02-01'), 2],
[new Date('2023-02-01'), 0],
[new Date('2023-02-01'), null],
[new Date('2023-04-01'), 3],
[new Date('2023-04-01'), 0],
[new Date('2023-04-01'), null]
];
如果我们更改下数据结构呢?比如:
let data = [
[new Date('2023-01-01'), null],
[new Date('2023-01-01'), 1],
[new Date('2023-01-01'), 0],
[new Date('2023-02-01'), null],
[new Date('2023-02-01'), 2],
[new Date('2023-02-01'), 0],
[new Date('2023-04-01'), null],
[new Date('2023-04-01'), 3],
[new Date('2023-04-01'), 0]
];
将 null
提前,不行。阻断了 hover
的读数行为~
既然可以通过整合数据来达到绘制竖线的效果,那么,我们就可以通过控制 strokeWidth
参数模拟柱形图的宽度。比如:
new Dygraph(dom, data, {
strokeWidth: 10
});
还不错。然后我们根据需求再美化下。比如俺实现的效果:
参考
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfcagba
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13