反馈已提交

网络繁忙

百分比圆环仪表盘

  • 文档创建者:susie
  • 历史版本:39
  • 最近更新:Fay 于 2022-11-25
  • 1. 概述

    1.1 版本

    报表服务器版本
    11.0

    1.2 应用场景

    「百分比圆环仪表盘」是一个完整的圆环,用来展示某一项在整个圆环的占比情况,包含类别、百分比、数值等指标数据。

    利用百分比圆环仪表盘,可以直观地展示某一项占总量的占比、完成率以及达成率之类的数据。效果如下图所示:

    1620892145949548.png

    1.3 图表特点

    优点:直观的表现出某个指标的进度和完成情况,主要用于进度或占比的展现。

    缺点:只能一个维度,指标数据也不宜过多,展示信息有限。

    2. 属性介绍

    2.1 类型

    以单元格元素或悬浮元素插入仪表盘后,可在右边属性面板的类型设置项下,选择百分比圆环仪表盘,如下图所示:

    2.2 数据

    基础数据设置项详细介绍可以参见文档:图表数据

    • 分类名:百分比对应的分类名称,前端展示时显示在中间滑槽区域。

    • 指针值:百分比计算时分子的一部分,要配合坐标轴下的最小值形成分子。

    • 目标值:百分比计算时分母的一部分,要配合坐标轴下的最小值形成分母。

    注1:百分比计算公式:(指针值-最小值)/(目标值-最小值),最小值指的是坐标轴处设置的最小值,详情参见下面样式的说明。

    Snag_3280e3a7.png

    2.3 样式

    百分比圆环仪表盘样式设计的详细介绍可以参见文档:图表样式

    2.3.1 系列

    百分比圆环仪表盘的「样式>系列」设置项跟基础样式有所不同,简单介绍:

    1)颜色:

    • 配色风格默认为「纯色」,颜色划分默认为「分类」,仪表盘不同分类根据配色方案显示颜色。

    1624280562297843.png

    • 配色风格为「纯色」,颜色划分选择「值」时,需设置「刻度和配色」:仪表盘根据刻度值显示仪表盘圆环的颜色,默认自动,取配色方案中前三种颜色,分别适配刻度 0~1/3,1/3~2/3,2/3~1 的区间色;选择自定义时,可设置值属于某个范围显示某个颜色。

    Snag_2943c205.png

    • 配色风格为「渐变色」时,每个分类仪表盘的颜色显示相同的渐变效果。

    1624281094619181.png

    2)布局/样式

    • 方向:数据集中有多个分类,前端展示时会出现多个仪表盘,此时可以改变这些仪表盘的排列方向。

    • 旋转方向:此处可选择顺时针、逆时针两种类型。

    • 底盘背景:此处控制显示百分比圆环区域的背景颜色,默认为灰色。

    • 内底盘背景:此处控制圆环内部的底盘背景颜色,默认为透明。

    • 半径设置:控制百分比圆环仪表盘的大小,分为自动和固定两种类型。

    • 滑槽占比:改变百分比圆环区域的占比。

    Snag_210d414c.png

    2.3.2 标签

    百分比圆环仪表盘的「样式>标签」设置项跟基础样式有所不同,简单介绍:

    • 百分比标签和值标签下的字号选择「自动」时,字体大小会根据仪表盘大小自动调整。

    1.png

    • 百分比标签下的颜色选择「自动」时,百分比标签的颜色会跟随系列色显示。

    1590742474458569.png

    • 值标签」支持显示「目标值」,默认不勾选。

    1620890716752297.png

    2.3.3 坐标轴

    百分比圆环仪表盘的「样式>坐标轴」设置项跟基础样式有所不同,简单介绍:

    • 自定义最小值:勾选后可以自定义最小值,默认不勾选。

    • 最小值:该值跟形成分子和分母有关系,百分比计算公式:(指针值-最小值)/(目标值-最小值)。

    注:只能设置最小值,无最大值。

    1593740079370513.png

    2.4 特效

    仪表盘特效设置的详细介绍可以参见文档:图表特效

    注:百分比仪表盘的特效设置项下没有条件显示。

    3. 示例

    3.1 报表设计

    3.1.1 数据准备

    新建决策报表,新建数据库查询 ds1,SQL 查询语句为:

    select 类别名称,sum(库存量)as 库存量 from 产品,类别

    where 产品.类别ID=类别.类别ID and 类别名称='饮料'

    Snag_b951ad5.png

    3.1.2 组件设计

    将百分比圆环仪表盘拖拽到 body 组件中,调整的位置,如下图所示:

    1587891933520731.png

    3.1.3 数据绑定

    百分比圆环仪表盘的数据来源为「数据集数据」,选择数据集 ds1,分类名为「类别名称」,指针值为「库存量」,目标值选择「自定义」设置为 500。如下图所示:

    Snag_53c408d.png

    3.1.4 样式设计

    可根据实际需要设置仪表盘样式,这里设置仪表盘的「标题」和「标签」如下图所示:

    Snag_54172b1.png

    3.2 效果预览

    3.2.1 PC 端

    保存模板,点击「PC 端预览」,效果如下图所示:

    Snag_5441f33.png

    3.2.2 移动端

    App 端和 HTML5 端均支持,效果如下图所示:

    Snag_5465d7b.png

    4. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\Dashboard\百分比圆环仪表盘.frm

    点击下载模板:百分比圆环仪表盘.frm

    附件列表


    主题: 图表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

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

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

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持