動態切換 web 報表中的統計圖型別
需求:
報表以圖形方式,也就是我們常說的“圖表”形式展示時,不同的使用者對圖形型別有不同的要求,希望能夠動態切換統計圖型別,例如實現柱形圖、條形圖、折線圖等圖形間的動態切換。
思路:
常見的做法是在報表中多個單元格中生成不同的統計圖,然後透過引數動態隱藏行來實現圖形型別切換,但此種方法需要製作大量的圖形圖表,工作量較大,而且大量隱藏單元格會耗用記憶體,在效能上也有一定影響。
當然,肯定還會有別的方式……我們在製作統計圖時會發現,絕大多數統計圖設定方式基本類似,只需要設定分類軸、系列即可生成統計圖。而生成的統計圖是透過單元格表示式中的 graph() 函式實現的,參考該函式的幫助文件發現,該函式可以傳入一個整型引數來控制統計圖型別,這樣我們就可以透過該引數實現統計圖型別間的動態切換。下面,我們具體介紹下該種方式的實現。
一:製作統計表
以訂單表為例,按貨主地區統計訂單數量,報表設計介面如下:
二:增加統計圖
A3、B3 單元格合併,並更改該行高度,在 A3 中設定統計圖:
統計圖型別可任選,分類軸以及系列中設定相應表示式 ,點選確定即可。這樣該單元格就生成了一個柱形圖。
三:動態更改型別
報表中增加一個整數型引數:type,用於控制統計圖型別,預設值設成 7 表示預設圖形型別是柱形圖:
將 A3 單元格的值表示式更改成 graph(type)
這樣預覽報表給該引數傳遞不同的值該單元格就能展示不同的圖形型別。
四:頁面端控制
報表製作好後,可在頁面端增加一個參數列單進行動態控制。如果使用者只需要看圖形,可將報表的前兩行設定隱藏,然後將沒用的行列刪除,將報表儲存為為 tu.rpx,並增加參數列單報表,設定如下:
C1 單元格變數名屬性設定成:type,C1 可做為下拉框供使用者選擇,值如下:
將報表儲存為 tu_arg.rpx,在瀏覽器端訪問 tu.rpx,更改引數點選查詢即可,如選擇折線圖:
選擇柱形圖:
附:各圖形型別對照關係:
1:區域圖
2:條形圖
3:三維條形圖
4:三維簇狀條形圖
5:堆積條形圖
6:三維堆積條形圖
7:柱形圖
8:三維柱形圖
9:三維簇狀柱形圖
10:堆積柱形圖
11:三維堆積柱形圖
12:折線圖
13:餅型圖
14:雜湊圖
15:三維區域圖
16:三維折線圖
17:三維餅型圖
18:時序狀態圖
19:時間走勢圖
20:雙軸折線圖
21:雙軸柱線圖
22:雷達圖
23:甘特圖
24:儀表盤
25:里程碑
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69900830/viewspace-2667038/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- C++ 動態型別轉換C++型別
- JS動態相簿--隨滑鼠所至切換封面圖JS
- C# 中的動態型別C#型別
- jenkins動態切換環境Jenkins
- echarts 主題動態切換Echarts
- 複雜報表設計之動態報表
- 淺談程式語言型別的強型別,弱型別,動態型別,靜態型別型別
- logback日誌級別動態切換的終極方案(Java ASM使用)JavaASM
- Linux命令 切換使用者型別 suLinux型別
- java中的型別轉換Java型別
- nacos實現對minio的動態版本切換
- web前端--最好用的切圖方法(轉換為智慧物件)Web前端物件
- [Delphi] 自帶皮膚動態切換
- keycloak~登入皮膚動態切換的嘗試
- JS實現動態瀑布流及放大切換圖片效果(js案例)JS
- Web自動化測試 五 ----- selenium的等待和切換Web
- mybatis 多資料來源動態切換MyBatis
- 安卓-自動切換APP圖示安卓APP
- 動態圖和靜態圖的程式碼區別
- web 報表中電子圖章 / 水印的輕鬆實現Web
- vue 實現tab切換動態載入不同的元件Vue元件
- 報表中怎麼新增動態文字水印
- 瞭解JavaScript中的型別轉換JavaScript型別
- 【iOS】動態更換圖示iOS
- CSS3 tab選項卡動態切換CSSS3
- 動態切換JDK8和JAVA17JDKJava
- (譯)js中的神奇的型別轉換JS型別
- java- 型別-轉換:基本型別以及包裝型別的轉換Java型別
- C#學習 [型別系統] 型別轉換(11)C#型別
- Vue中的靜態型別檢查Vue型別
- Vue內建的Component標籤用於動態切換元件Vue元件
- 大屏報表中如何實現多圖表間的聯動?
- 切換系統中多個python版本Python
- JS在if中的強制型別轉換JS型別
- C++ 表示式中的型別轉換C++型別
- spring-data-redis 動態切換資料來源SpringRedis
- Web前端主題切換的幾種方案Web前端
- JS中資料型別轉換JS資料型別