图形化显示数据(进度条/等级)

  • 文档创建者:文档助手1
  • 编辑次数:25次
  • 最近更新:Carly 于 2020-05-12
  • 1. 概述

    1.1 预期效果

    在报表中,为了便于分析数据,看到数据的趋势与瓶颈,往往使用统计图来展示数据,因为图形的方式要比数值方式直观的多。

    如各销售员的销售量、用户评价级别等,希望单元格中直接显示进度条或者其他图形标志来表示数据或等级,如下图所示:

    1)特殊符号
    image.png

    2)进度条

    1585636300946453.png

    1.2 实现思路

    有两种方式可以实现以上效果:

    1)通过插件实现,详情请参见: 单元格进度条插件 

    2)通过 HTML 实现,本文将详细介绍这种制作方法。

    2. 示例一:特殊字符显示数据

    2.1 新建报表

    新建普通报表,新建内置数据集 ds1,如下表所示:

    1585639050347266.png

    2.2 设计报表

    报表主体样式,如下图所示:

    image.png

    数据列与单元格具体设置,如下表所示:

    单元格插入元素内容字体颜色
    A3数据列ds1.姓名黑色
    B3数据列ds1.专业评分黑色
    C3公式=repeat("|",B3*2)蓝色
    D3数据列ds1.表现评分黑色
    E3公式=repeat("|",D3*2)绿色
    F3公式=(B3+D3)/2黑色
    G3公式=repeat("★",F3)红色

    注:=repeat("★", F3):若 F3 值为 3,则重复显示 3 次星号。

            Repeat 函数的具体使用方法请参见:Repeat 函数

    2.3 效果预览

    保存模板,点击分页预览,效果如下图所示:

    image.png

    3. 示例二:进度条显示数据

    3.1 新建报表

    新建普通报表,新建内置数据集 ds1,如下表所示:

    1585639050347266.png

    3.2 设计报表

    报表主体样式,如下图所示:

    1585641657482321.png

    在 C7 单元格中,输入公式:

    "<table width=" + ROUND(B7 * 200 / sum(B7[!0;!0]), 2) + "% border=0 cellspacing=0 cellpadding=0> <tr> <td bgcolor=#0000FF><div color=#ffffff align=right>" + B7 + "</div></td> </tr> </table>"

    公式释义如下表所示:

    代码释义
    "<table width=" + ROUND(B7 * 200 / sum(B7[!0;!0]), 2) 设置宽度
    border=0边框宽度为 0 ,即无边框
    cellspacing=0单元格间距设置为 0
    cellpadding=0单元格的内容和边框距离为 0
    bgcolor=#00E3E3设置单元格的背景颜色为 #00E3E3
    color=#ffffff设置单元格的内容颜色为 #ffffff
    align=right设置单元格的内容位置靠右

    注:进度条的长短是由宽度确定的,而宽度的计算是一个需要观察的值(如:某人的值在全员中的占比或者某人的某个属性值)乘或除以一个比例,如例子中的 200。该例子中使用 ROUND(B7 * 200 , 2) 或 B7 * 200 均可实现类似的效果。

    3.3 设置单元格属性

    1)选中 C7 单元格,点击单元格属性>样式>对齐,设置文本控制单行显示(调整字体),如下图所示:

    1589263162908031.png

    2)选中 C7 单元格,点击单元格属性>其他 ,设置显示内容用 HTML 显示内容,如下图所示:

    1589263386441292.png

    3.4 效果预览

    保存模板,点击分页预览,效果如下图所示:

    1585636300946453.png

    4. 效果预览

    已完成的模板请参见%FR_HOME%\webroot\WEB-INF\reportlets\doc\SpecialSubject\TypicalIndustryReport\DesignerReport\bar.cpt

    点击下载模板:bar.cpt

    附件列表


    主题: 报表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!