在数据可视化应用方面,滚动图表插件一直备受欢迎,下面给大家一份关于滚动图标插件干活教程。
滚动图标插件教程
主要使用
jQueryjQuery.marqueejQuery-DataTables视频效果
滚动表支持
滚动表支持
下面来看具体操作教程
首先引入需要的插件:
//【必须】加载所需插件,此处需给出CDN链接或者服务端相对资源地址即可
同时也可以使用服务端相对资源地址
第二步、初始化需要的插件信息:
1.声明需要储存的变量方便使用
2.在onMount时,存储id、jQuery、dataTable和marquee,方便后面使用。插件内可以直接使用jQuery直接控制dom。options.containerId是图表渲染div的id可以用它直接控制图表dom。并初始化插件数据。
第三步、更新数据渲染处理:
dataTables在重新渲染的时候会出现警告,所以需要清除数据,再重新传入数据:
注:onMount主要是初始化使用,初次加载的时候同时也会执行onUpdated方法。更新数据加载。
第四步、调整大小,卸载插件:
当页面大小改变的时候会调用onResize调整插件大小样式
如果插件需要卸载,在onUnMount方法内卸载插件即可:
最后,也是最主要的,就是options拼接:
使用 transformToDataSet获取ChartDataSet数据,并且处理拼接data和columns数据。
这里尤其需要注意data数据的 format 处理。
再使用getStyles获取最新样式数据,拼接其他数据即可完成。
是不是 so easy ,只要控制好几个生命周期函数处理逻辑,就可以控制插件的数据加载,更新,卸载。
国产开源数据可视化社群加V信(retech01)
更多请参考在线文档:https://running-elephant.github.io/datart-docs/docs/chart_plugin.html
本文介绍的插件仓库地址:/running-elephant/datart-extension-charts/tree/main/plugins/datart-scrolldHelperAPI 文档:http://running-elephant.gitee.io