圖表标簽動态顯示或隐藏

1.1 應用場景

有時候想要通過按鈕點擊來實現标簽顯示或隐藏，效果如下圖所示：

1.2 實現思路

給按鈕添加 JS 點擊事件來實現标簽動态顯示或隐藏效果。

• 顯示控件點擊事件：$(".seriesTextRenderGroup").css("display","block");

• 隐藏控件點擊事件：$(".seriesTextRenderGroup").css("display","none");

2.1 準備模板

打開設計器内置模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\BasicChart\柱形圖-折線圖.cpt

此處提供下載鏈接，可以直接點擊下載該模板：柱形圖-折線圖.cpt

2.2 添加控件

參數面板處添加 2 個按鈕控件，分别命名爲顯示标簽和隐藏标簽，如下圖所示：

2.3 添加事件

1）選中顯示标簽按鈕，添加一個點擊事件，如下圖所示：

JavaScript 代碼如下：

$(".seriesTextRenderGroup").css("display","block");

2）選中隐藏标簽按鈕，添加一個點擊事件，如下圖所示：

JavaScript 代碼如下：

$(".seriesTextRenderGroup").css("display","none");

2.4 效果預覽

保存報表，點擊分頁預覽，效果如下圖所示：

注：不支持移動端預覽。

已完成模板可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\Chart\圖表标簽動态顯示或隐藏.cpt

點擊下載模板：圖表标簽動态顯示或隐藏.cpt