js統計圖表工具FineReport教程：[13]系列拖曳?

系列拖曳是指在web端對圖表系列的拖曳合併與刪除，用戶在web端查看圖表的時候，可手動簡單的操作當前圖表，比如說，想要將2個系列進行合併或者刪除某一個系列，下面就通過js統計圖表工具FineReport來簡單介紹一下。

工具/原料

js統計圖表工具FineReport7.1.1

大小：148.2M 適用平臺：windows/linux

方法/步驟

數據修改

Chart.cpt模板中數據配置只有2個系列，展示系列拖曳時，效果可能不會很明顯，下面我們修改該圖表的系列名，如下圖，選中圖表，點擊圖表屬性表-數據，將系列名修改為產品：

系列拖曳

選中圖表元素，在右側的圖表屬性表中選擇圖表屬性表-特效>交互屬性，勾選系列拖曳前面的單選框，如下圖：

效果查看

模板設置完成之後，保存模板，點擊分頁預覽按鈕查看報表，如下圖，web端查看該報表，裡面有5個系列：

系列合併

如果想要查看某兩個系列的合併值，比如說，如上圖，想要查看巧克力和牛肉乾總的銷量情況，那麼我們可以在web端選中任一一個分類下面的巧克力或者牛肉乾柱子，將其拖曳至牛肉乾或者巧克力柱子上，即可將兩個系列進行合併，如下圖：

系列刪除

如果想要將某個系列的數據從web端圖表中去除，那麼該如何操作呢？

點擊右上角的按鈕，清除該模板在web端的所有操作，恢復到原始狀態，比如說，我們不想看到牛肉乾系列的數據，那麼我們可以使用鼠標按住牛肉乾系列所在的柱子，將其往圖表外側區域拖曳即可，可往圖表的繪圖區域外側的任意方向都可以，如下圖：

注：圖表系列的刪除與圖表圖例交互中的系列隱藏是不一樣的，系列拖曳刪除系列是直接將該系列從圖表中刪除，數據也不存在，除非刷新頁面或者清除操作才可能恢復，而圖例交互中的隱藏確是將該系列進行隱藏，再次點擊該系列圖例就可以再次恢復。