FineReport是一个功能强大的报表和看板生成工具,可以快速、简便地生成报表和看板,从而提高开发效率。然而,在开发过程中,我们可能会遇到一些局限性,无法像代码开发一样灵活地进行操纵。
开发背景
我们经常会通过图表来展示数据,但是当数据内容过多,就会导致坐标轴标签显示不完整,帆软默认了轴标签显示方式为间隔显示,这样可以看到部分标签,但无法让标签全部显示。
所以,帆软还支持缩略显示,但对于数据过多的图表来说,也是毫无效果,例如下图看到的只有省略。
让全部横坐标标签都显示只剩下最后一种办法了,那就是换行显示。但如果内容过多,也会占用很多底部空间。当然,帆软支持显示区域进行限制。
对图表按坐标标签分页,变成了开发的一种常见思路。而帆软的特效中,也存在了一个轴滚动的功能来实现,可以通过滚动来按间隔查看数据。
但我们如果是看板,用户更希望能自动轮播,所以我开始了新的摸索。
以上的开发背景介绍的有点长,但也是比较详细,哈哈哈
开发步骤如下
1.创建Tab块
引入Tab块,存放我要轮播的图表。结合轮播的次数来创建Tab。
2.创建数据集
为了满足轮播效果,图表对应的数据集已经由一个拆分成多个,通过SQL来进行分页。
select 产品名称,库存量,订购量 from S产品
where 产品名称 in ('${productName}')
LIMIT 10 OFFSET (0 * 10)
3.设置图表数据
一个数据集对应一个Tab的图表
已经准备好轮播所需的图表
但是,但轮播到没有数据的Tab时,便会提示“图形没有数据”,这在视觉效果上还是有点遐思。
4.图表特殊处理
所以为了不显示这个提示,当下拉复选组件初始化后和编辑后增加了对数据集与Tab的判断。
①获取下拉复选组件;②判断数据集数据;③设定数据为空时Tab不可见
setTimeout(function() {
var productName = _g().getWidgetByName("productName").getValue()
var sql1 = "SQL(\"FRDemo\",\"select 产品名称,库存量,订购量 from S产品 where 产品名称 in ('"+ productName +"') LIMIT 10 OFFSET (0 * 10)\",1)";
var value1 =FR.remoteEvaluate(sql1);
if(value1.length==0){
_g().getWidgetByName("tabpane0").setTabVisible("Tab00", false)
}
var sql2 = "SQL(\"FRDemo\",\"select 产品名称,库存量,订购量 from S产品 where 产品名称 in ('"+ productName +"') LIMIT 10 OFFSET (1 * 10)\",1)";
var value2 =FR.remoteEvaluate(sql2);
if(value2.length==0){
_g().getWidgetByName("tabpane0").setTabVisible("Tab10", false)
}
var sql3 = "SQL(\"FRDemo\",\"select 产品名称,库存量,订购量 from S产品 where 产品名称 in ('"+ productName +"') LIMIT 10 OFFSET (2 * 10)\",1)";
var value3 =FR.remoteEvaluate(sql3);
if(value3.length==0){
_g().getWidgetByName("tabpane0").setTabVisible("Tab20", false)
}
}, 500)
当Tab3无数据时,之前的提示已经不再显示。
5.隐藏Tab标题
为了让图表的轮播效果更好,我将Tab标题隐藏。
_g().getWidgetByName("tablayout0").setTitleVisible(false)
没有标题比原来“清爽”了不少,啊啊啊