请上传宽度大于 1200px,高度大于 164px 的封面图片
    调整图片尺寸与位置
    滚轮可以放大缩小图片尺寸,按住图片拖动可调整位置,多余的会自动被裁剪掉
取消
Alicehyy(uid:504714)
职业资格认证:尚未取得认证
柱形图实现动态刷新效果
1. 概述 1.1 应用场景 在使用柱形图实现可视化的过程中,可能会遇到以下几种业务需求: 1)柱子太多无法在一个柱形图中全部展示出来。 2)柱子太多一次性全部展示出来影响图表美观。 3)需要做成动态展示增强图表的表现效果。 1.2 预期效果 让柱形图的柱子在一定时间间隔内切换,动态展示出所有的柱子,效果如下图所示: 1.3 实现思路 实现这个效果的核心思路是找一个不断变化的量,写在 SQL 的 where 条件语句中,作为查询条件,这样在特效的监控刷新效果中,根据我们设置的刷新时间,数据集会不断执行我们设置的动态 SQL 。 不断变化的因素,想来想去也就只有服务器时间这一个了,所以我们取服务器时间的“秒”作为不断变化的因素,加入到 where 条件语句中,变成我们需要的动态 SQL 。 2. 操作步骤 2.1 报表设计 1)将柱形图拖到决策报表中,如下图所示: 2)新建数据集 ds1,示例中的动态 SQL 语句如下: select * from ( select Row_Number() over (order by qdh) as id,* from  qqctu_dm.dm_sec_qd_elec ) a  where  id%2 = cast(substr(cast(current_timestamp as varchar),19,1) as int)%2 注1:将所要展示的记录排序并编号,再将服务器时间的“秒”作为一个查询条件写入 where 条件中,不同数据库的 SQL 可能略有不同,但是道理都是一样的,此处作者使用的查询引擎是 presto,读者应根据实际情况灵活处理。 注2:因为 SQL 中涉及取服务器时间,所以上传内置数据集模板无法加载出动态效果,此处只讲 SQL 上传,读者根据自己使用的数据库类型自行转换即可。 3)绑定柱形图数据,如下图所示: 4)在交互属性中设置动态刷新时间,此处与 SQL 对应好,否则刷新可能会出问题,如下图所示: 2.2 效果预览 保存报表,点击PC端预览,效果如下图所示:   来自用户:大尾巴企鹅
多分类图表实现分类轴某分类隐藏
本文方案来自用户 zsh331  多分类坐标轴-https://help.fanruan.com/finereport/doc-view-2234.html  文档中 11.0.3 版本产品新增功能可实现该方案,故将该方案移至论坛。   1. 概述 1.1 预期效果 在设计图表时,有时需要绑定双(多)分类,细化数据展示效果,但预览时,只需显示某一个分类的情况。 例如:X轴 绑定「年月」和「年月日」字段,但显示时,坐标轴只需要显示「年月」,折线图要以「年月日」维度查看数据。如下图所示: 1.2 实现思路 通过轴标签格式自定义使用 JavaScript 代码实现。判断分类轴内容的长度,使其大于某个长度时显示为空。 注:适用于不同分类长度均不同的情况。 2. 示例 2.1 数据准备 新建普通报表,新建数据库查询 ds1 ,SQL 查询语句为: SELECT  Substr(订购日期,1,7) as 月,Substr(订购日期,1,10) as 日,运货费 FROM S订单  where Substr(订购日期,1,7) is not null order by Substr(订购日期,1,7) limit 40 2.2 报表设计 2.2.1 插入折线图 选中一片单元格区域,合并单元格后,插入「折线图」。如下图所示: 2.2.2 绑定图表数据 选中图表,点击「单元格元素>数据」,绑定图表数据如下图所示: 2.2.3 设置坐标轴标签 点击「样式>坐标轴>X轴」,设置「标签>文本旋转」为 -90 ,轴标签格式选择「自定义」,输入代码如下: function() { if (this.length > 7) return ''; // 当分类轴内容长度大于7时,返回空,实现隐藏 else return this; } 2.3 效果预览 2.3.1 PC 端 保存报表,点击「分页预览」,效果如下图所示: 2.3.2 移动端 App 端和 HTML5 端均支持,效果如下图所示: 3. 模板下载 多分类图表实现分类轴某分类隐藏.rar (4.31 K)
决策报表引用echarts图表
1. 概述 1.1 应用场景 FineReport 自带的图表无法满足需求,设计器版本不满足使用 ECharts图表集成插件 ,又需要在 FR 中使用 echarts 图表。 1.2 实现思路 在决策报表中,通过引用 echarts.js 结合「标签」控件 和 「报表块」组件实现。 注:不支持普通报表。 2. 示例 2.1 数据准备 新建决策报表,新建内置数据集「销量」,如下图所示:    2.2 设计模板 2.2.1 设置报表块 1)向 body 中拖入一个「报表块」组件,组件名称为 report0,并取消勾选「可见」。如下图所示: 2)在报表块中添加数据,将「销量」数据集中的「产品」数据列拖入单元格 A1,「销量」数据列拖入单元格 B1 ,如下图所示: 将两个数据列均设置成「列表」且「不扩展」。如下图所示: 2.2.2 设置标签控件 1)向 body 中拖入一个「标签」控件,控件名称为 label0 。如下图所示: 2)给「标签」控件添加「初始化后」事件,添加两个参数: 参数名 值类型 参数值 说明 category 公式 report0~A1 引用报表块 A1 单元格的数据,作为图表的分类,即 X 轴 value 公式 report0~B1 引用报表块 B1 单元格的数据,作为分类的值,即 Y 轴 输入 JavaScript 代码如下: setTimeout(function() { //延时执行 // 清空标签控件里的内容 $("div").empty(); // 往标签控件里添加div,指定id $("div").append(" "); var main = document.getElementById('main'); // 用于使 Echarts 自适应高度和宽度,通过标签控件计算 DOM 容器的高宽 var resizeMapContainer = function() { main.style.width = $("").width() + 'px'; main.style.height = $("").height() + 'px'; }; // 初始化容器的高宽 resizeMapContainer(); // 基于准备好的Dom,初始化echarts实例 var myChart = echarts.init(main); // 指定图表的配置项和数据 var option = { title: { text: '带背景色的柱状图' }, tooltip: {}, xAxis: { type: 'category', data: category }, yAxis: {}, series: [{ type: 'bar', data: value, showBackground: true, backgroundStyle: { color: 'rgba(180, 180, 180, 0.2)' } }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); // 监控窗口大小变化 window.addEventListener("resize", function() { // 重置容器高宽 resizeMapContainer(); myChart.resize(); }); }, 500); 步骤如下图所示: 2.3 引用 JS 文件 点击下载 JS 文件:echarts_v5.0.1.js 。将文件放到 %FR_HOME%\webapps\webroot\scripts\js 路径下。如下图所示: 在设计器中,选择菜单栏「服务器 > 服务器配置 > 引用 JavaScript」,选择 echarts_v5.0.1.js 所在路径,点击「增加」后再点击「确定」。如下图所示: 2.4 效果预览 保存模板,点击「PC 端预览」,效果如下图所示: 注:不支持移动端 点击下载模板:FR引入echarts示例.rar (12.16 K) 方案来自用户 zhouxi 
图表自定义多系列提示
1. 概述 1.1 问题描述 当图表的样式>提示>显示策略中勾选了显示所有系列时,使用自定义提示默认的代码只能显示一个系列的提示,如下图所示: 默认代码的自定义提示不符合实际应用场景的需求,希望每个系列分行提示,且在提示值后面加上「万元」两个字,如下图所示: 1.2 解决思路 修改默认生成的 JS 代码,使用 for 循环遍历系列修改对应的值,使用 HTML 标签来美化效果。 2. 示例 2.1 数据准备 新建普通报表,新建数据集 ds1,数据库查询语句为:SELECT * FROM 销量 2.2 报表设计 1)合并一片区域的单元格,插入柱形图,如下图绑定图表数据:   2)柱形图样式>提示中勾选使用数据点提示,输入自定义数据点提示代码,并选择使用html解析文本内容,如下图所示: 注:使用HTML解析文本的方法参见:图表使用 HTML 解析文本内容 JS 代码如下: function(){ var points = this.points; var value = "" + this.category;         for(var i = 0;i < points.length;i++) {                      if(points.series.visible){                         value += ''+"●"+points.seriesName+':'+points.value+"万元";                 }        }     return value+""; } 3)柱形图样式>提示>显示策略中勾选显示所有系列,如下图所示: 2.3 效果预览 1)PC 端 保存报表,点击分页预览,效果如下图所示:   2)移动端   注:文档来源于 axing
获取钻取地图当前层级接口
1. 概述 1.1 应用场景 用户有时希望在钻取不同地图层级时,可以在指定层级进行传参,例如下图只在钻取第二层时传参。那么如何实现这样的传参效果呢? 1.2 实现思路 需要先使用 charts.layerMap.length; 获取地图当前的钻取层级,然后可以使用 if 条件判断层级来传递不同的参数。 2. 示例 2.1 准备数据 新建决策报表,新建数据集 ds1,SQL 查询语句为:SELECT * FROM 地图1,如下图所示: 2.2 设计报表 1)将钻取地图和报表块分别拖拽到 body 里面,如下图所示: 2)绑定钻取地图的数据,共有 2 层,如下图所示:   3)钻取地图交互属性下设置 2 个 JavaScript 类型的超级链接,实现点击地图或钻取目录后,传递参数。 上面一个超链是控制点击钻取目录的,下面的超链是控制点击地图的,它们的代码是一样的。 本示例中因为只有 2 层,所以没用到点击钻取目录传参,不过这边加了代码设置,是想让您知道可以这样做。 代码编辑界面新增一个参数 b,其值为区域名,参数设置好后,填入代码即可。 JavaScript 代码如下: var charts = FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0); var layer = charts.layerMap.length; //获取钻取层级 //大区层级 if(layer == 2){ _g().options.form.getWidgetByName("report0").gotoPage(1,"{aaa:'"+b+"'}",true); //如果当前钻取层级是第二层,那么将参数b传给报表块 } 4)编辑报表块,设计表格如下图所示: 5)双击 A2 单元格,添加过滤条件,让 pid 字段等于参数 aaa,这里设置筛选是为了实现参数筛选效果。 $aaa 是地图 JavaScript 代码中已有的参数,此处借该参数接收地图里面传递的参数,当钻取地图当前层级为 2 时,将参数 b 传递给报表块。 2.3 效果预览 保存报表,点击分页预览,钻取地图层级的同时传参效果如下图所示: 注:不支持移动端预览。 3. 模板下载 点击下载模板:判断钻取地图层级控制参数传递.rar (24.35 K)
图表标签动态显示或隐藏
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
个人成就
内容被浏览45,807
加入社区3年167天
返回顶部