图表标签动态显示或隐藏

1. 概述

1.1 应用场景

有时候想要通过按钮点击来实现标签显示或隐藏，效果如下图所示：

1.2 实现思路

给按钮添加 JS 点击事件来实现标签动态显示或隐藏效果。

• 显示控件点击事件：$(".seriesTextRenderGroup").css("display","block");
• 隐藏控件点击事件：$(".seriesTextRenderGroup").css("display","none");
  
  

2. 示例

2.1 准备模板

打开设计器内置模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\BasicChart\柱形图-折线图.cpt

文末提供下载链接，可以直接下载模板

2.2 添加控件

参数面板处添加 2 个按钮控件，分别命名为显示标签和隐藏标签，如下图所示：

2.3 添加事件

1）选中显示标签按钮，添加一个点击事件，如下图所示：

JavaScript 代码如下：

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

复制代码

2）选中隐藏标签按钮，添加一个点击事件，如下图所示：

JavaScript 代码如下：

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

复制代码

2.4 效果预览

保存报表，点击分页预览，效果如下图所示：

注：不支持移动端。

为什么我组合图看不到标签这个按钮

很不错的功能，稍后自己再试试