FineReport决策报表实现图表轮播

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)

没有标题比原来“清爽”了不少，啊啊啊

6.设置Tab的轮播

7.最终的效果