开源数据可视化 datart-自定义Jquery图表插件教程

在数据可视化应用方面，滚动图表插件一直备受欢迎，下面给大家一份关于滚动图标插件干活教程。

滚动图标插件教程

主要使用

• jQuery
• jQuery.marquee
• jQuery-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

本文介绍的插件仓库地址：https://gitee.com/running-elephant/datart-extension-charts/tree/main/plugins/datart-scrolldHelper API 文档：http://running-elephant.gitee.io