動態切換 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# 4.0中的動態型別和動態程式設計C#型別程式設計
- C++ 動態型別轉換C++型別
- 統計報表中動態增加列的解決方法之一
- C# 中的動態型別C#型別
- 在VB6.0中實現動態統計報表 (轉)
- JS動態相簿--隨滑鼠所至切換封面圖JS
- web風格樣式動態切換並cookie記憶WebCookie
- 複雜報表設計之動態報表
- echarts 主題動態切換Echarts
- 淺談程式語言型別的強型別,弱型別,動態型別,靜態型別型別
- jenkins動態切換環境Jenkins
- java中的型別轉換Java型別
- C++中的向上型別轉換和向下型別轉換C++型別
- 安卓-自動切換APP圖示安卓APP
- 動態sql 報表SQL
- Silverlight4中實現Theme的動態切換
- 資料型別轉換圖資料型別
- python中的型別轉換Python型別
- 報表中怎麼新增動態文字水印
- web前端--最好用的切圖方法(轉換為智慧物件)Web前端物件
- 請教個動態報表設計的問題
- Linux命令 切換使用者型別 suLinux型別
- C的動態型別檢查型別
- logback日誌級別動態切換的終極方案(Java ASM使用)JavaASM
- nacos實現對minio的動態版本切換
- web 報表中電子圖章 / 水印的輕鬆實現Web
- mybatis 多資料來源動態切換MyBatis
- Android 主題動態切換框架:PrismAndroid框架
- SSM(八)動態切換資料來源SSM
- CSS滑鼠移動圖片切換功能CSS
- JS實現動態瀑布流及放大切換圖片效果(js案例)JS
- C語言中資料型別的自動型別轉換C語言資料型別
- 動態圖和靜態圖的程式碼區別
- 如何在水晶報表中動態新增欄位
- 瞭解JavaScript中的型別轉換JavaScript型別
- JavaScript中的強制型別轉換JavaScript型別
- 大屏報表中如何實現多圖表間的聯動?
- 【iOS】動態更換圖示iOS