历史版本13 :自定义标签为图片 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 版本

报表服务器版本
11.0

1.2 预期效果

当我们制作图表时，希望图表能使用图片作为标签，跟随图形显示。

例如用条形图表示排名时，预期效果如下图所示：

Snag_149d292f.png

1.3 实现思路

图表标签使用「自定义」，通过 HTML 代码实现。

Snag_1029a250.png

2. 示例一编辑

2.1 准备数据

点击设计器左上角「文件>新建普通报表」，选择模板主题为「清爽科技」。

新建数据库查询 ds1，输入 SQL 语句为：SELECT  销售员,sum(销量) as 销量 FROM 销量 group by 销售员 order by 销量 desc，将销量表中的销售员及对应的总销量取出，并降序排序。如下图所示：

2.2 设置纸张大小

本例中的图表会稍微大一些，为了模板在预览时不分页展示，先在「模板>页面设置」中将纸张大小调大一点，如下图所示：

Snag_14a59001.png

2.3 设计报表

2.3.1 插入图表

先合并一片单元格区域，再插入「条形图」。如下图所示：

Snag_14acd768.png

2.3.2 绑定数据

选中图表，点击右侧属性面板「单元格元素>数据」，绑定数据如下图所示：

2.3.3 设置单元格数据

将数据集 ds1 中的「销售员」和「销量」字段分别拖入 I1 单元格和 J1 单元格，拖入后选中两列单击鼠标右键，将其隐藏。如下图所示：

7AC29C97-B97E-4166-92F4-40EE73E57D9C.GIF

2.3.4 设置图表标签

选中图表，点击右侧属性面板「单元格元素>样式>标签」，具体设置如下图所示：

代码如下所示：

function(){
if(this.value==_g().getCellValue("J1")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top1-18.png" width="62" height="50"></td> </tr></table>'; 
else if(this.value==_g().getCellValue("J2")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top2-19.png" width="62" height="50"></td> </tr></table>'; 
else if(this.value==_g().getCellValue("J3")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top3-20.png" width="62" height="50"></td> </tr></table>'; 
else if(this.value==_g().getCellValue("J4")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top4.png" ></td> </tr></table>';  
else if(this.value==_g().getCellValue("J5")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top5.png" ></td> </tr></table>'; 
else if(this.value==_g().getCellValue("J6")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top6.png" ></td> </tr></table>';
else if(this.value==_g().getCellValue("J7")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top7.png" ></td> </tr></table>'; 
else if(this.value==_g().getCellValue("J8")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top8.png" ></td> </tr></table>'; 
else if(this.value==_g().getCellValue("J9")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top9.png" ></td> </tr></table>';
else return this.value;}

注1：设计器或URL 预览模板时可以通过以上代码中的相对路径 img src ="../../help/picture/xxx.png" 获取图片资源，但是把模板挂载到数据决策系统后，需要使用绝对路径获取图片，如 img src ="http://IP:port/webroot/help/picture/XXX.png"，其中 IP:port 为用户自身工程的地址及端口。

注2：this.value==_g().getCellValue("J1") 即获取单元格 J1 的内容；标签值等于 J1 时，标签显示为固定图片 top1-18.png，以此类推。

注3：可通过 HTML 设置标签内容在大小范围内上下左右居中显示，当标签内容在定义的大小范围内无法完全显示时，截断显示。

代码中使用的图片保存在 %FR_HOME%\webapps\webroot\help\picture 文件夹下，由于前三名使用的图片比其他图片的尺寸大很多，所以在代码中对前三名的图片使用 width="62" height="50" 定义了宽高。

Snag_14b6f271.png

2.3.5 设置Y轴逆序

完成标签自定义后，保存预览下效果，如下图所示：

AA6FD4D3-680F-4678-9DFE-C8EED8D94263.GIF

预览看到条形图从上往下是升序而不是降序，这是因为条形图的分类是从下往上排列的，所以我们需要开启 Y轴 的轴逆序。如下图所示：

2.3.6 其他样式设置

1）选中图表，点击「单元格元素>样式>标题」，输入文本「销量排名」。如下图所示：

2）取消勾选图例可见，因为只有一个系列，且标题包含销量，无需再显示图例。

2.4 效果预览

保存报表，点击「分页预览」，效果如 1.1预期效果 所示。

注：不支持移动端。

2.5 决策报表示例

在决策报表中，支持图表和数据在一个报表块中使用，也支持图表和数据分开时使用，但是 HTML 代码中获取单元格值的方式不同，需修改为： this.value==_g().getWidgetByName("report0").getCellValue("J1")。根据实际情况修改报表块名称和单元格即可。

如上述普通报表的代码，在决策报表中为：

注1：设计器或URL 预览模板时可以通过以上代码中的相对路径 img src ="../../help/picture/xxx.png" 获取图片资源，但是把模板挂载到数据决策系统后，需要使用绝对路径获取图片，如 img src ="http://IP:port/webroot/help/picture/XXX.png"，其中 IP:port 为用户自身工程的地址及端口。

注2：不支持移动端。

function(){
if(this.value==_g().getWidgetByName("report0").getCellValue("J1")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top1-18.png" width="62" height="50"></td> </tr></table>'; 
else if(this.value==_g().getWidgetByName("report0").getCellValue("J2")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top2-19.png" width="62" height="50"></td> </tr></table>'; 
else if(this.value==_g().getWidgetByName("report0").getCellValue("J3")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top3-20.png" width="62" height="50"></td> </tr></table>'; 
else if(this.value==_g().getWidgetByName("report0").getCellValue("J4")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top4.png" ></td> </tr></table>';  
else if(this.value==_g().getWidgetByName("report0").getCellValue("J5")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top5.png" ></td> </tr></table>'; 
else if(this.value==_g().getWidgetByName("report0").getCellValue("J6")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top6.png" ></td> </tr></table>';
else if(this.value==_g().getWidgetByName("report0").getCellValue("J7")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top7.png" ></td> </tr></table>'; 
else if(this.value==_g().getWidgetByName("report0").getCellValue("J8")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top8.png" ></td> </tr></table>'; 
else if(this.value==_g().getWidgetByName("report0").getCellValue("J9")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top9.png" ></td> </tr></table>';
else return this.value;}

详情请到文末下载模板查看。

3.示例二编辑

点击左上角文件新建可视化看板>画布大小任意，模板样式选择深色主题。

准备数据和示例一相同，故不在此处重复。

3.1设计可视化看板

3.1.1插入图表

从左侧组件栏中选择图表>点击条形图类拖拽条形图到body中；同样从左侧组件栏中选择文字>拖拽表格到body中。如下图所示：

插入图表.png

3.1.2绑定数据

条形图绑定数据和示例一相同，表格数据将将数据集 ds1 中的「销售员」和「销量」字段分别拖入 A1 单元格和 B1 单元格，并修改组件名称为表格1如下图所示：

样式1.png

3.1.3设置图标标签

选中条形图组件>点击内容>点击样式>勾选使用标签>点击自定义>将代码粘贴到文本框中>点击使用html解析文本>勾选自定义背景宽度为65>布局位置选择内侧

注FVS中获取单元格值的方式有所不同为duchamp.getWidgetByName("表格1").getCellValue(row,col)，完整代码如下：

点击展开更多

function(){

if(this.value==duchamp.getWidgetByName("表格1").getCellValue(1,2)) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top1-18.png" width="62" height="50"></td> </tr></table>'; 

else if(this.value==duchamp.getWidgetByName("表格1").getCellValue(2,2)) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top2-19.png" width="62" height="50"></td> </tr></table>'; 

else if(this.value==duchamp.getWidgetByName("表格1").getCellValue(3,2)) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top3-20.png" width="62" height="50"></td> </tr></table>'; 

else if(this.value==duchamp.getWidgetByName("表格1").getCellValue(4,2)) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top4.png" ></td> </tr></table>';  

else if(this.value==duchamp.getWidgetByName("表格1").getCellValue(5,2)) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top5.png" ></td> </tr></table>'; 

else if(this.value==duchamp.getWidgetByName("表格1").getCellValue(6,2)) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top6.png" ></td> </tr></table>';

else if(this.value==duchamp.getWidgetByName("表格1").getCellValue(7,2)) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top7.png" ></td> </tr></table>'; 

else if(this.value==duchamp.getWidgetByName("表格1").getCellValue(8,2)) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top8.png" ></td> </tr></table>'; 

else if(this.value==duchamp.getWidgetByName("表格1").getCellValue(9,2)) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top9.png" ></td> </tr></table>';

else return this.value;}

如图所示：

样式2.png

3.1.4其他样式设置

条形图其余设置与示例一相同

3.2效果预览

PC展示.png

4. 示例三编辑

本例直接使用内置模板 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\NewChart\BarChart\自定义标签条形图.frm 做简单讲解。

首先在设计器中打开模板，直接预览，效果如下图所示：

Snag_3278131f.png

回到模板中，我们双击图表，看一下「标签」的代码，如下图所示：

Snag_327a4253.png

代码如下所示：

注1：设计器或URL 预览模板时可以通过以上代码中的相对路径 img src ="../../help/picture/emoji/'+this.category+'.gif" 获取图片，但是把模板挂载到数据决策系统后，需要使用绝对路径获取图片，如 img src ="http://IP:port/webroot/help/picture/emoji/'+this.category+'.gif" ，其中 IP:port 为用户自身工程的地址及端口。

注2：同时支持普通报表和决策报表，且支持移动端。

dle"></p>';}

示例二的代码和示例一的代码区别在于：示例二中引用的图片名称和条形图的分类名是相同的，所以标签的图片直接使用分类名 this.category  即可正确匹配；而示例一的图片不能直接与分类名匹配，需要先获取单元格中的值再匹配。

移动端效果如下图所示：

Snag_46fb24.png

5. 模板下载编辑

1）示例一：

已完成模板可参见：

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\BarChart\自定义标签为图片.cpt

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\BarChart\自定义标签为图片.frm

点击下载模板：

自定义标签为图片.cpt

自定义标签为图片.frm

2）示例二

自定义标签为图片.fvs

3）示例三：

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\NewChart\BarChart\自定义标签条形图.frm

点击下载模板：自定义标签条形图.frm