帆软标签自定义

傷城~ 2022-12-31 05:28 459阅读 0赞

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

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>'\}

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6cDY2Ng_size_16_color_FFFFFF_t_70][]

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

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, '\#.\#\#%'); //求占比  
\}

效果：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6cDY2Ng_size_16_color_FFFFFF_t_70 1][]

展示方式三：自定义图片

[https://help.fanruan.com/finereport/doc-view-1882.html?source=1][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 解析文本内容，同时可以根据图片大小，自定义背景宽度和高度。

![222][]

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文件夹下，如下图所示：

![222][222 1]

3）效果预览

![222][222 2]

展示方式四： 标签换行

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  
\}

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6cDY2Ng_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6cDY2Ng_size_16_color_FFFFFF_t_70]: /images/20221120/54872f03157045899f4f14ee3f7f255b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6cDY2Ng_size_16_color_FFFFFF_t_70 1]: /images/20221120/de234380879d4ddf89efea01a990645b.png
[https_help.fanruan.com_finereport_doc-view-1882.html_source_1]: https://help.fanruan.com/finereport/doc-view-1882.html?source=1
[222]: /images/20221120/547ad39939194020adbff586a0be59fd.png
[222 1]: /images/20221120/ff235e7e52124b18aeb1894b1559f795.png
[222 2]: /images/20221120/98ec6b16ed24464dbd4e1bfc90a5ee95.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6cDY2Ng_size_16_color_FFFFFF_t_70 2]: /images/20221120/826f716b22874ca8ac05ca624134b9cd.png