1. 概述
1.1 版本
| 报表服务器版本 |
|---|
| 10.0 |
1.2 预期效果
当我们制作图表时，希望图表能使用图片作为标签，跟随图形显示。
例如用条形图表示排名时，预期效果如下图所示：
1.3 实现思路
图表标签使用「自定义」，通过 HTML 代码实现。
2. 示例一
2.1 准备数据
点击设计器左上角「文件>新建普通报表」。
新建数据库查询 ds1，输入 SQL 语句为：SELECT 销售员,sum(销量) as 销量 FROM 销量 group by 销售员 order by 销量 desc，将销量表中的销售员及对应的总销量取出，并降序排序。如下图所示：
2.2 设置纸张大小
本例中的图表会稍微大一些，为了模板在预览时不分页展示，先在「模板>页面设置」中将纸张大小调大一点，如下图所示：
2.3 设计报表
2.3.1 插入图表
先合并一片单元格区域，再插入「条形图」。如下图所示：
2.3.2 绑定数据
选中图表，点击右侧属性面板「单元格元素>数据」，绑定数据如下图所示：
2.3.3 设置单元格数据
将数据集 ds1 中的「销售员」和「销量」字段分别拖入 I1 单元格和 J1 单元格，拖入后选中两列单击鼠标右键，将其隐藏。如下图所示：
2.3.4 设置图表标签
选中图表，点击右侧属性面板「单元格元素>样式>标签」，具体设置如下图所示：
代码如下所示：
function() {
if(this.value==$("td[id^=I1-]").text()) 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==$("td[id^=I2-]").text()) 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==$("td[id^=I3-]").text()) 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==$("td[id^=I4-]").text()) 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==$("td[id^=I5-]").text()) 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==$("td[id^=I6-]").text()) 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==$("td[id^=I7-]").text()) 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==$("td[id^=I8-]").text()) 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==$("td[id^=I9-]").text()) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top9.png" ></td> </tr></table>';
else if(this.value==$("td[id^=I10-]").text()) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top10.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：$("td[id^=I1-]").text()即获取单元格 I1 的内容；标签值等于 I1 时，标签显示为固定图片 top1-18.png，以此类推。
注2：可通过 HTML 设置标签内容在大小范围内上下左右居中显示，当标签内容在定义的大小范围内无法完全显示时，截断显示。
代码中使用的图片保存在 %FR_HOME%\webapps\webroot\help\picture 文件夹下，由于前三名使用的图片比其他图片的尺寸大很多，所以在代码中对前三名的图片使用 width="62" height="50" 定义了宽高。
2.3.5 设置Y轴逆序
完成标签自定义后，保存预览下效果，如下图所示：
预览看到条形图从上往下是升序而不是降序，这是因为条形图的分类是从下往上排列的，所以我们需要开启 Y轴 的轴逆序。如下图所示：
2.3.6 其他样式设置
1）选中图表，点击「单元格元素>样式>标题」，输入文本「销量排名」。如下图所示：
2）取消勾选图例可见，因为只有一个系列，且标题包含销量，无需再显示图例。
2.4 效果预览
保存报表，点击「分页预览」，效果如 1.1预期效果 所示。
注：不支持移动端。
2.5 决策报表示例
在决策报表中，支持图表和数据在一个报表块中使用，也支持图表和数据分开时使用，但是 HTML 代码中获取单元格值的方式不同，需修改为：this.value==$("td[id^=B1-]").text()根据实际情况修改报表块名称和单元格即可。
如上述普通报表的代码，在决策报表中为：
注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==$("td[id^=B1-]").text()) 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==$("td[id^=B2-]").text()) 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==$("td[id^=B3-]").text()) 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==$("td[id^=B4-]").text()) 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==$("td[id^=B5-]").text()) 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==$("td[id^=B6-]").text()) 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==$("td[id^=B7-]").text()) 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==$("td[id^=B8-]").text()) 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==$("td[id^=B9-]").text()) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top9.png" ></td> </tr></table>';
else if(this.value==$("td[id^=B10-]").text()) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top10.png" ></td> </tr></table>';
else return this.value;
}
详情请到文末下载模板查看。
3. 示例二
本例直接使用内置模板 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\NewChart\BarChart\自定义标签条形图.frm 做简单讲解。
首先在设计器中打开模板，直接预览，效果如下图所示：
回到模板中，我们双击图表，看一下「标签」的代码，如下图所示：
代码如下所示：
注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：同时支持普通报表和决策报表，且支持移动端。
function(){return'<p><img src ="../../help/picture/emoji/'+this.category+'.gif" width="30" height="30" align="middle"></p>';}
示例二的代码和示例一的代码区别在于：示例二中引用的图片名称和条形图的分类名是相同的，所以标签的图片直接使用分类名 this.category 即可正确匹配；而示例一的图片不能直接与分类名匹配，需要先获取单元格中的值再匹配。
移动端效果如下图所示：