反馈已提交

网络繁忙

自定义标签

  • 文档创建者:Holly
  • 编辑次数:33次
  • 最近更新:Alicehyy 于 2021-06-08
  • 1. 概述

    1.1 应用场景

    用户有以下需求时:

    • 饼图系列标签的字号在保证颜色不变的情况下调大。

    • 图表标签希望显示为比率。

    • 在一个图表里希望展示两种数据格式的标签。

    • 标签显示分类下的系列和。

    • 图表标签系列值求和并且显示在外面。

    • 在试管型仪表盘标签里添加图片。

    可参考本文方法实现。

    1.2 功能入口

    样式>标签>内容下自定义文本,输入 JavaScript 代码,使用 HTML 解析文本内容,来实现标签自定义,设置方法详细介绍参见文档:图表使用 HTML 解析文本内容

    注:自定义单个系列标签参见文档:图表自定义单系列标签

    Snag_140b2e75.png

    2. 示例

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

    1)准备模板

    打开内置模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\NewColumnChart\标签自定义图片.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" 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;
    }

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

    注1:包括标签,坐标轴标签,警戒线标签,以及 label (不包括数据点提示)。

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

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

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

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

    222

    3)效果预览

    企业微信截图_16231439458073.png

    2.2 示例二:标签自定义数据格式

    1)数据准备

    新建普通报表,添加 ds1 数据集,统计每个时间段的销售金额。

    image.png

    2)插入图表

    以单元格图表为例,合并一片单元格,插入柱形图

    222

    3)图表数据设置

    选中图表,在右侧属性面板中选择数据,如下图设置图表数据。

    222

    4)图表样式设置

    右侧属性面板选择样式>标签,点击自定义,插入自定义样式代码,并点击使用 HTML 解析文本内容

    222

    这里我们使用 FR.contentFormat(value, '#.##%')来进行数值格式自定义,后面的'#.##%'可以根据实际需求进行更改。

    本示例中计算:占比=分类1下系列/所有分类下系列的和,占比的格式为'#.##%'

    JavaScript 代码如下:

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

    选择单元格元素>样式>坐标轴>X 轴,设置格式。

    222

    根据需要可在图表属性表中进一步设置图表样式,例如调整标题,系列间隔,这里不再详细介绍。

    5)效果预览

    222

    2.3 示例三:标签自定义分类下的系列和

    1)数据准备

    新建普通报表,添加内置数据集 File1。

    222

    2)插入图表

    以单元格图表为例,合并一片单元格,插入柱形图>堆积柱形图

    222

    3)图表数据设置

    选中图表,在右侧属性面板设置图表数据,如下图所示:

    222

    4)图表样式设置

    右侧属性面板选择样式>标签,勾选使用标签,点击自定义,插入自定义样式代码,并点击使用 HTML 解析文本内容。

    222

    JavaScript 代码如下:

    function() {
    var point = this;
    var series = this.series;
    var points = this.points;/*获取当前分类下所有点*/
    var validPoints = points.filter(function(p) {
    return p.series.visible && p.visible && !p.isNull;/*获取当前分类下的有效点*/
    });
    var len = points.length;
    var vlen = validPoints.length;
    if (point == validPoints[vlen - 1]) {
    var value = 0;
    for (var i = -1; ++i < len;) {
    if (points[i].series.visible) {
    value += points[i].getTargetValue();/*获取点的值*/
    }
    }
    return value;/*返回相加后的值*/
    } else {
    return "";/*返回各个系列的值*/
    }
    }

    注:复制代码后建议把注释去除,以免造成语句格式混乱。

    5)效果预览

    222

    2.4 示例四:组合图标签自定义分类下的系列和

    1)准备模板

    打开设计器内置模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\Combination\堆积柱形-折线组合图.cpt

    2)自定义柱形图标签

    柱形图标签选择自定义,插入自定义代码,点击使用html解析文本内容,位置设置为外侧,如下图所示:

    Snag_2d82cedf.png

    JavaScript 代码如下:

    function() { 
        var point = this; 
        var points = this.points; 
        var val = 0; 
        /* points.length - 2  获取柱状图 当前分类下系列点最后一个点 
            -2 是因为下标是以0开始 然后在减去折线图系列数量 
            上图 折线图系列点数量就一个 
        */
        if (point == points[points.length - 2]) {  
            /* points.length - 1  减去折线图系列点的数量 */
            for (var i = 0; i < points.length - 1; i++) {   
                val += points[i].value  
            } 
            return val; 
         }else{  
         return "";
         }
    }

    3)自定义折线图标签

    折线图设置通用标签就行,勾选,如下图所示:

    Snag_2d89ce31.png

    4)效果预览

    Snag_33f9b7da.png


    2.5 示例五:标签自定义字体

    1)模板准备

    打开内置模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\chart\basic\玫瑰图.cpt 

    2)标签设置

    选中图表,右侧属性面板选择样式>标签,勾选使用标签,点击自定义,插入自定义样式代码,并点击使用 HTML 解析文本内容,位置选择饼图外,选择牵引线

    222

    JavaScript 代码如下:

    function(){ 
        return '<span style="color:'+this.color+';"> '+this.value+' </span>'; //标签系列色
    }

    3)效果预览

    222

    3. 模板下载

    1)示例一

    已完成的模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\NewColumnChart\标签自定义图片.cpt

    点击下载模板:标签自定义图片.cpt

    2)示例二

    已完成的模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\NewColumnChart\CustomLabelDataFormat.cpt

    点击下载模板:CustomLabelDataFormat.cpt

    3)示例三

    已完成的模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\NewColumnChart\CustomLabelSeriesSum.cpt 

    点击下载模板:CustomLabelSeriesSum.cpt

    4)示例四

    已完成的模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\NewColumnChart\组合图标签自定义分类下的系列和.cpt

    点击下载模板:组合图标签自定义分类下的系列和.cpt

    5)示例五

    已完成的模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\NewColumnChart\标签自定义之字体.cpt

    点击下载模板:标签自定义之字体.cpt

    附件列表


    主题: 图表应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭