切片器是SpreadJS V10版本之後新增的功能，是一種篩選表格數據的新方式。SpreadJS V11版本發布了圖表功能，切片器可以和圖表功能進行聯動，已達到更好的可視化展示。接下來讓我們一步一步來實現切片器與圖表聯動，最後達到使用切片器來篩選圖表以及表格數據的目的。

環境準備

創建一個HTML文件，添加SpreadJS相關script和css的引用。本示例中我們需要如下方所示來引用相關依賴：

之後添加用來承載SpreadJS的div元素。

數據源的載入

本示例中繪製圖表以及創建表格的數據源是存放於js中，所以需要進行引用

<script src="./data/data.js" type="text/javascript"></script>

SpreadJS初始化

接下來在js代碼中初始化SpreadJS

創建表格

添加切片器

添加圖表

注意這裡需要用table1[#all]這樣的方式來將表頭添加到Chart中。

這樣就完成了，通過切片器的篩選，可以圖表上也可以動態的反應其變化。

以上就是如何使用切片器與圖表進行聯動。

了解更多

SpreadJS是 Spread 表格開發系列產品之一。該產品是葡萄城公司出品的一系列功能和 Excel 類似的表格工具，支持桌面、Web 和移動平台開發，用於在應用系統中實現 Excel 導入導出、表格數據錄入和編輯等交互功能，並提供靈活的定製能力和豐富的數據可視化效果。

Spread 是目前市面上最接近 Excel 的表格開發工具，無論是界面、函數還是布局，都與 Excel 高度接近，正被華為、東軟、中國平安、河海大學、中通快遞、普華永道、魔方網表、思源軟體等企業應用於項目開發中。

除了純前端的SpreadJS，該系列產品還包括 .NET 平台可用的Spread Studio，和伺服器端批量操作Excel的Spread表格組件，敬請登陸官網了解更多：http://www.gcpowertools.com.cn/

關於葡萄城

葡萄城成立於1980年，是全球最大的控制項提供商，世界領先的企業應用定製工具、企業報表和商業智能解決方案提供商，為超過75%的全球財富500強企業提供服務。葡萄城於1988年在中國設立研發中心，在全球化產品的研發過程中，不斷適應中國市場的本地需求，並為軟體企業和各行業的信息化提供優秀的軟體工具和諮詢服務。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！