大家好，我是国内开源数据可视化应用 datart 团队前端小田，没错，我来了！
这几天，datart 图表插件大赛正值火热报名中，奖品看的我极其眼热（虽然他们说过，没我的份），好了，话不多说，直接上干货，这次给大家呈上的是滚动图表插件教程。
主要使用
-
jQuery
-
jQuery.marquee
-
jQuery-DataTables
下面来看具体操作教程
补充一下，datart 文档地址：datart (running-elephant.github.io)
正式进入正题
首先引入需要的插件：
// 【必须】加载所需插件，此处需给出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 ，只要控制好几个生命周期函数处理逻辑，就可以控制插件的数据加载，更新，卸载。
更多请参考在线文档：
https://running-elephant.github.io/datart-docs/docs/chart_plugin.html
本文介绍的插件仓库地址：https://gitee.com/running-elephant/datart-extension-charts/tree/main/plugins/datart-scroll
dHelper API 文档：http://running-elephant.gitee.io/datart-docs/api/
datart 开源数据可视化应用工具推荐给有需要的小伙伴，进开源社群加V（edpstack），想要学习更多的教程可以关注公众号：跑象