在數(shù)據(jù)可視化應(yīng)用方面，滾動圖表插件一直備受歡迎，下面給大家一份關(guān)于滾動圖標(biāo)插件干活教程。

滾動圖標(biāo)插件教程

主要使用

• jQuery
• jQuery.marquee
• jQuery-DataTables

視頻效果

滾動表支持

滾動表支持

下面來看具體操作教程

首先引入需要的插件：

//?【必須】加載所需插件，此處需給出CDN鏈接或者服務(wù)端相對資源地址即可

同時也可以使用服務(wù)端相對資源地址

第二步、初始化需要的插件信息：

1.?聲明需要儲存的變量方便使用

2.?在onMount時，存儲id、jQuery、dataTable和marquee，方便后面使用。插件內(nèi)可以直接使用jQuery直接控制dom。options.containerId是圖表渲染?div?的?id?可以用它直接控制圖表dom。并初始化插件數(shù)據(jù)。?

第三步、更新數(shù)據(jù)渲染處理：

dataTables在重新渲染的時候?會出現(xiàn)警告，所以需要清除數(shù)據(jù)，再重新傳入數(shù)據(jù)：

注：onMount主要是初始化使用,?初次加載的時候同時也會執(zhí)行?onUpdated方法。更新數(shù)據(jù)加載。

第四步、調(diào)整大小，卸載插件：

當(dāng)頁面大小改變的時候會調(diào)用onResize?調(diào)整插件大小樣式

如果插件需要卸載，在onUnMount方法內(nèi)卸載插件即可：

最后，也是最主要的，就是options拼接：

使用 transformToDataSet獲取ChartDataSet數(shù)據(jù)，并且處理拼接data和columns數(shù)據(jù)。

這里尤其需要注意data數(shù)據(jù)的 format 處理。

再使用getStyles獲取最新樣式數(shù)據(jù)，拼接其他數(shù)據(jù)即可完成。

是不是 so easy ，只要控制好幾個生命周期函數(shù)處理邏輯，就可以控制插件的數(shù)據(jù)加載，更新，卸載。

國產(chǎn)開源數(shù)據(jù)可視化社群加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

總結(jié)

以上是生活随笔為你收集整理的开源数据可视化 datart-自定义Jquery图表插件教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。