帆软标签自定义

帆软自定义标签，展示系列名、值，以及值占比（%显示）

 

function(){ return '<table style="color:'+this.color+'; fontSize:20pt; " > '+'<tr>'+this.seriesName+'<br>'+'</tr>'+'<tr>'+Math.round((this.value)*100)/100+'</tr>'+'('+Math.round(this.percentage*100)+'%)'+'</table>'}

效果：

 

 

展示方式二，标签展示占比

function() {
var points = this.series.points; //获取所有的数据点
var total = 0;
for (var i = 0, len = points.length; i < len; i++) {
total += points[i].value; //求分类下的系列和
}
return FR.contentFormat(this.value / total, '#.##%'); //求占比
}

 

效果：

 

展示方式三：自定义图片

https://help.fanruan.com/finereport/doc-view-1882.html?source=1

2.1 示例一：标签自定义图片

1）准备模板

打开内置模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\NewColumnChart\CustomAxisLabel.cpt

2）自定义标签

选中图表属性表>样式>标签，勾选使用标签，点击自定义，插入自定义样式代码，并点击使用HTML 解析文本内容，同时可以根据图片大小，自定义背景宽度和高度。

JavaScript 代码如下：

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" ></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" ></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" ></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;
}

显示代码

标签自定义 HTML 时可指定大小。当用 HTML 指定内容，无法确定标签大小时，用来指定标签内容的宽高。

注1：包括标签，坐标轴标签，警戒线标签，以及 label （不包括数据点提示）。

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

$("td[id^=I1-]").text()即获取单元格 I1 的内容；标签值等于 I1 时，标签显示为固定图片 top1-18.png，以此类推。

注：I1 所扩展出来的数据在 SQL 中已进行过降序排列。

图片保存在%FR_HOME%\webapps\webroot\help\picture文件夹下，如下图所示：

3）效果预览

 

 

展示方式四： 标签换行

function(){  var a = this.value.toString();//可把一个逻辑值转换为字符串，并返回结果
var length = a.length; var b = parseInt((a.length)/2);//分成2部分取整
var value= a.substring(0,b)+"<br>"+a.substring(b,length);//展示前部分，换行展示后部分
return value
}