图表标签动态显示或隐藏

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