1. 概述
爲了實現在同一頁面在線切換展示不同圖表,可以選擇點擊按鈕(button)來切換查看不同的圖表。
2. 示例
2.1 添加圖表
2.1.1 添加地圖
新建内置數據集,如下圖:
以單元格圖表爲例,合并一片單元格,點擊插入>單元格元素>插入圖表,選擇地圖,如下圖:
選中圖表,在右側選擇類型,修改類型設置如下圖:
選中圖表,在右側選擇數據,設置數據如下圖:
2.2.2 設置條形圖
在右側選擇類型,點擊新增一個圖表 2 标簽
選中圖表,在右側選擇類型,修改類型設置如下圖:
選中圖表,在右側選擇數據,設置數據如下圖:
選中圖表,在右側選擇特效,柱形圖分類圖改用男女頭像,分類1和2設置,條件屬性1設置如下圖:
條件屬性2設置,如下圖:
注:分類序号值應該選擇整型。
2.2.3 添加餅圖
添加圖表後,選中圖表,在右側選擇類型,修改類型設置如下圖:
選中圖表,在右側選擇數據,設置數據如下圖:
選中圖表,在右側選擇樣式-系列,設置内徑,實現環形餅圖,如下圖:
2.2.4 添加柱形圖
添加圖表後,選中圖表,在右側選擇類型,修改類型設置如下圖:
選中圖表,在右側選擇數據,設置數據如下圖:
選中圖表,在右側選擇樣式-系列,實現帶圓角柱形圖,如下圖:
2.2.5 添加氣泡圖
添加圖表後,選中圖表,在右側選擇類型,修改類型設置如下圖:
選中圖表,在右側選擇數據,設置數據如下圖:
選中圖表,在右側選擇樣式-系列,實現修改氣泡大小,如下圖:
2.2.6 圖表切換屬性
在右側選擇類型,點擊設置按鈕,選擇切換方式爲按鈕,同時設置按鈕控件的樣式和背景,如下圖所示:
注1:圖表切換只針對設置的圖表 index 生效。如只設置了第二個圖表自動刷新,則只有第二個圖表執行刷新操作。
注2:切換按鈕上的文字即圖表标題,若不想顯示,則可将圖表标題删除,再設置不顯示标題即可。
2.2 效果查看
1)PC 端
保存報表,點擊分頁預覽,效果如下圖所示:
注:如果圖表名稱縮略顯示了,則鼠标移動到對應的控件位置時,在控件下方居中顯示圖表名稱的數據點提示。
2)移動端
移動端采用左右切換按鈕進行切換,效果如下圖所示:
3. 模板下載
已完成模板可參考%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\GraphSwitching\按鈕式圖表切換.cpt
點擊下載模板:按鈕式圖表切換.cpt