動態切換 web 報表中的統計圖型別

xiaohuihui發表於2019-12-05

需求:

報表以圖形方式,也就是我們常說的“圖表”形式展示時,不同的使用者對圖形型別有不同的要求,希望能夠動態切換統計圖型別,例如實現柱形圖、條形圖、折線圖等圖形間的動態切換。

思路:

常見的做法是在報表中多個單元格中生成不同的統計圖,然後透過引數動態隱藏行來實現圖形型別切換,但此種方法需要製作大量的圖形圖表,工作量較大,而且大量隱藏單元格會耗用記憶體,在效能上也有一定影響。

當然,肯定還會有別的方式……我們在製作統計圖時會發現,絕大多數統計圖設定方式基本類似,只需要設定分類軸、系列即可生成統計圖。而生成的統計圖是透過單元格表示式中的 graph() 函式實現的,參考該函式的幫助文件發現,該函式可以傳入一個整型引數來控制統計圖型別,這樣我們就可以透過該引數實現統計圖型別間的動態切換。下面,我們具體介紹下該種方式的實現。

一:製作統計表

以訂單表為例,按貨主地區統計訂單數量,報表設計介面如下:

1jpg

二:增加統計圖

A3、B3 單元格合併,並更改該行高度,在 A3 中設定統計圖:

2jpg

統計圖型別可任選,分類軸以及系列中設定相應表示式 ,點選確定即可。這樣該單元格就生成了一個柱形圖。

三:動態更改型別

報表中增加一個整數型引數:type,用於控制統計圖型別,預設值設成 7 表示預設圖形型別是柱形圖:

3jpg

將 A3 單元格的值表示式更改成 graph(type)

這樣預覽報表給該引數傳遞不同的值該單元格就能展示不同的圖形型別。

四:頁面端控制

報表製作好後,可在頁面端增加一個參數列單進行動態控制。如果使用者只需要看圖形,可將報表的前兩行設定隱藏,然後將沒用的行列刪除,將報表儲存為為 tu.rpx,並增加參數列單報表,設定如下:

4jpg

C1 單元格變數名屬性設定成:type,C1 可做為下拉框供使用者選擇,值如下:

5jpg

將報表儲存為 tu_arg.rpx,在瀏覽器端訪問 tu.rpx,更改引數點選查詢即可,如選擇折線圖:

6jpg

選擇柱形圖:

7jpg

附:各圖形型別對照關係:

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/,如需轉載,請註明出處,否則將追究法律責任。

相關文章