找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,极速登录

请上传宽度大于 1200px,高度大于 164px 的封面图片
    调整图片尺寸与位置
    滚轮可以放大缩小图片尺寸,按住图片拖动可调整位置,多余的会自动被裁剪掉
取消
Alicehyy(uid:504714)
职业资格认证:无
图表标签动态显示或隐藏
1. 概述 1.1 应用场景 有时候想要通过按钮点击来实现标签显示或隐藏,效果如下图所示:https://help.fanruan.com/finereport/uploads/20210125/1611553924893077.gif1.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 个按钮控件,分别命名为显示标签和隐藏标签,如下图所示:https://help.fanruan.com/finereport/uploads/20210125/1611554225933018.png 2.3 添加事件 1)选中显示标签按钮,添加一个点击事件,如下图所示:https://help.fanruan.com/finereport/uploads/20210125/1611554425827293.png JavaScript 代码如下:$(".seriesTextRenderGroup").css("display","block"); 2)选中隐藏标签按钮,添加一个点击事件,如下图所示:https://help.fanruan.com/finereport/uploads/20210125/1611554549132225.pngJavaScript 代码如下:$(".seriesTextRenderGroup").css("display","none"); 2.4 效果预览 保存报表,点击分页预览,效果如下图所示: https://help.fanruan.com/finereport/uploads/20210125/1611553924893077.gif 注:不支持移动端。 编辑于 2021-7-14 10:18
仪表盘自定义标签目标值
1. 概述10.0.16 版本之前的设计器中,百分比圆环仪表盘、百分比刻度槽仪表盘和试管型仪表盘的「值标签」不支持显示「目标值」,但可以通过自定义实现:https://help.fanruan.com/finereport/uploads/20210125/1611555663519858.png实现效果如下图所示:https://help.fanruan.com/finereport/uploads/20210125/1611555574275391.png2. 示例2.1 准备数据新建普通报表,新建内置数据集,表设计如下图所示: https://help.fanruan.com/finereport/uploads/20210125/1611555741401561.png2.2 插入图表在表格中合并三块单元格区域,分别插入图表:百分比圆环仪表盘、百分比刻度槽型仪表盘、试管型仪表盘。如下图所示:https://help.fanruan.com/finereport/uploads/20210514/1620961920730197.png2.3 绑定数据3 个图表的数据绑定是一致的,如下图所示:https://help.fanruan.com/finereport/uploads/20210125/1611556046680702.png2.4 自定义标签3 个图表自定义标签的方法一致,点击「样式>标签」,在「值标签」处选中「自定义」,输入 JavaScript 代码,并选中「使用 html 解析文本内容」。JavaScript 代码如下:function() { return this.category + "实际值:" + this.value + "目标值:" + this.target;} 注:this.value 代表实际值,this.target 代表目标值,但 this.target 非官方接口,慎用。在 10.0.16 版本及之后的设计器中,目标值官方接口为 this.targetValue。 如下图所示:https://help.fanruan.com/finereport/uploads/20210125/1611556149203691.png2.5 效果预览2.5.1 PC 端 保存报表,点击「分页预览」,效果如下图所示:https://help.fanruan.com/finereport/uploads/20210514/1620962382148026.png2.5.2 移动端App 端和 HTML5 端均支持,效果如下图所示:https://help.fanruan.com/finereport/uploads/20210514/1620962524464966.png
自定义鼠标悬浮在图表上的光标
1. 概述 1.1 预期效果 当鼠标移动到图表的系列上时,希望能够出现醒目的光标,以提示用户进行操作,如下图所示:https://help.fanruan.com/uploads/20200228/1582879200378729.gif1.2 实现思路 使用 JS 将光标设置为自定义图片,将自定义图片 cursor.png 重命名为「cursor.cur」,然后放到%FR_HOME%\webapps\webroot\help\picture目录下。 注:图片格式必须为 .cur 或 .ani 格式。 2. 示例 2.1 普通报表1)新建数据集 ds1,数据库查询语句为:SELECT * FROM 销量https://help.fanruan.com/uploads/20200225/1582618954848070.png2)合并一片区域单元格并插入一个饼图,如下图绑定图表数据:https://help.fanruan.com/uploads/20200225/1582619027287504.png3)菜单栏选择模板>模板Web属性>分页预览设置>为该模板单独设置,然后添加一个加载结束事件,如下图所示:https://help.fanruan.com/uploads/20200225/1582619171788735.pngJS代码如下:setTimeout( function() { $("td").find("path").bind('mouseover', function() { this.style.cursor = "url('../../help/picture/cursor.cur'),pointer"; }) }, 1000) 注:td 中的 A1 为图表所在单元格。 2.2 决策报表 1)将饼图拖入到决策报表设计主体中,按照2.1绑定图表数据。2)给饼图添加一个初始化后事件,如下图所示:https://help.fanruan.com/uploads/20200225/1582619618470378.jpgJS 代码如下:setTimeout( function() { $("div").find("path").bind('mouseover', function() { this.style.cursor = "url('../../help/picture/cursor.cur'),pointer"; }) }, 1000) 注:div 中的 CHART0 是图表块的组件名,注意全部要大写。 编辑于 2021-6-15 14:33
JS实现隐藏轮播图正下方切换圆点
1. 概述1.1 预期效果在一些实际项目中,当使用图表轮播功能时,轮播图正下方默认会显示轮播切换圆点,这些圆点的作用在于,用户可以在图表轮播过程中,手动选择查看某一个图表。但有时为了不影响报表展示的美观性,我们需要隐藏这些切换圆点。https://help.fanruan.com/uploads/20190919/1568881923370677.png1.2 实现思路分页预览设置中添加 JavaScript 「加载结束」脚本,用延迟函数隐藏图表轮播切换圆点。注:决策报表同样适用,给图表块添加初始化事件即可。 2. 示例 2.1 准备模板1)新建模板,新建数据集 ds1,SQL语句为:SELECT * FROM 销量,如下图所示:https://help.fanruan.com/uploads/20190919/1568882384683438.png2)合并 A1~I20 单元格,插入两个图表:柱形图,饼图,设置这两个图表的轮播间隔为 2 秒。如下图所示:https://help.fanruan.com/uploads/20190919/1568882754474679.png 3)设置柱形图的数据。如下图所示:https://help.fanruan.com/uploads/20190919/1568882930575135.png4)设置饼图的数据。如下图所示:https://help.fanruan.com/uploads/20190919/1568883027152929.png 2.2 添加 JS 代码设计器菜单栏选择模板>模板 Web 属性>分页预览设置,添加加载结束事件。如下图所示:https://help.fanruan.com/uploads/20190919/1568883408280973.pngJavaScript 代码如下: 注:鼠标悬停在图表上时,图表不会自动轮播。setTimeout(function() { $(".vanchart-menu-dot").css("display", "none"); }, 100);//100表示100毫秒后自动隐藏轮播切换圆点,可根据实际需求自行设置值 2.3 效果预览保存模板,点击「分页预览」,效果如下图所示:https://help.fanruan.com/uploads/20190919/1568884537770413.gif注:不支持移动端。 3. 模板下载点击下载模板: 编辑于 2021-6-10 11:30
特殊字符实现复选按钮控件的打印或导出
1. 概述 填报时打印或导出复选框中打印或导出控件需要修改配置项,如果不想修改配置项怎么实现呢? 参考文档单选按钮组控件的打印/导出,可通过特殊字符实现,如下示例。 2. 示例「复选框按钮控件」的值只有 true 和 flase,没有数据字典设置,值需要通过设置单元格形态的数据字典,自定义实际值与显示值即可实现打印与导出控件。2.1 添加控件随意在一张报表中添加「复选按钮控件」,设置控件所在单元格扩展方向为「纵向扩展」。2.2 单元格形态设置设置单元格形态为「数据字典」,类型设置为「自定义」。复选按钮控件,设置当实际值为 true 时,显示值为特殊符号 ☑,实际值为 flase 时,显示值为特殊符号 □ 。https://help.fanruan.com/finereport/uploads/20210111/1610353570700695.png2.3 控件默认值设置复选按钮控件默认没有值,预览时必须进行至少一次勾选操作,才会赋予单元格值。所以需要先设置控件默认值为 flase,直接在控件所在单元格输入文本 flase 即可。详情可参见:复选按钮、复选按钮组控件默认值。 2.4 效果预览保存报表,点击「填报预览」,点击打印或导出。效果如下图所示:注:打印和导出 PDF 时,☑ 无法显示,导出 Excel、Word 和图片均正常显示,若需要打印可导出为 Word 或图片再打印。https://help.fanruan.com/finereport/uploads/20210111/1610354743632529.pnghttps://help.fanruan.com/finereport/uploads/20210111/1610354743913086.png3. 模板下载:已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\FormFAQ\打印导出复选按钮控件.cpt 编辑于 2021-6-15 14:35
个人成就
内容被浏览5,379
加入社区0天
贡献:0

联系社区管理员|联系帆软|《帆软社区协议》|手机版|帆软社区|Copyright © 帆软软件有限公司 ( 苏ICP备18065767号-7 )

GMT+8, 2021-9-17 09:33 , Processed in 3.017653 second(s), 58 queries , Gzip On.

返回顶部