1. 概述
1.1 版本
报表服务器版本 | 功能变动 |
---|---|
10.0.18 | 组件属性改版,在该界面可以分别设置组件的标题、背景、边框 |
1.2 应用场景
本文主要说明图表块组件样式设计。
图表块组件样式是指图表块的外部框架样式,并非图表内容样式,图表内容样式设置可参考 图表样式 。
2. 添加图表块
在 FineReport 设计器中点击「文件>新建决策报表」,在空白块中选中「图表块」拖入到决策报表中。
在决策报表中拖入一个饼图,如下图所示:
3. 组件属性
3.1 基本
组件名称:默认为 chart 加数字,数字从 0 开始,支持修改,但不支持为空或重复。
可见:默认勾选,不勾选并预览报表时,该报表块隐藏不显示。
3.2 坐标尺寸
拖动组件时,可以在此次实时查看该组件的位置和大小,调整布局时可以直接设置这些数值保证组件对齐。
控件位置的原点(横纵坐标都是0)在 body 左上角。
控件大小是支持锁定宽高比的,也就是组件可以等比例缩放。
3.3 高级
高级属性主要是设置图表块组件的样式,如下图所示:
详情请参考 组件样式 。
4. 移动端说明
4.1 内边距导致图表大小不一致
4.1.1 问题描述
body 「自适应布局」下,body 设置内边距和不设置内边距,在移动端预览时,图表块预览大小不一致。
如下图所示:图表块 1 与图表块 2 的大小设置是一致的;
在 PC 端预览时,图表 1 与图表 2 下的饼图大小是一样的,然而在移动端或 HTML5 下预览时,两张饼图的大小是不一致的,如下图所示:
4.1.2 原因分析
原因在于模板内边距的左内边距,设计器的自适应会将左边距计入相邻的组件宽度。
4.1.3 解决方法
解决方法有三种:
1)取消设置模板内边距的左边距,并且调整 chart1 与 chart2 的尺寸宽高一致;
2)由于 chart1、chart2 均为饼图,可以强制设定饼图半径为相等的固定值;如下图所示
3)通过调整控件大小实现,只要边距加上相邻组件的宽度跟期望等宽的控件宽度相等;
即左边距加上 chart1 的宽度等于 chart2 的宽度。如下图所示:
修改后,App 与 HTML5 预览,饼图大小是一致的,如下图所示:
4.1.4 模板下载
已完成模板可参考:%FR_HOME%\webroot\WEB-INF\reportlets\doc\frm\内边距设置.frm
点击下载模板:内边距设置.frm