反馈已提交

网络繁忙

当前为10.0版本文档,只有最新版本的文档支持在线编辑修改,如果想创建/编辑文档,请移步至 最新版帮助文档

试管型仪表盘

  • 文档创建者:susie
  • 历史版本:36
  • 最近更新:Alicehyy 于 2021-12-23
  • 1. 概述

    1.1 版本说明

    报表服务器版本功能变动
    10.0.10
    标签支持设置文本方向
    10.0.12系列纵向布局的百分比标签和值标签支持居中显示
    10.0.16值标签、数据点提示以及监控刷新自动数据提示新增显示项——目标值
    10.0.17配色逻辑优化:新增按分类显示配色,按图形内显示渐变色的方式,同时保留原有按值设置配色的方式,详情参见本文 2.3.1

    1.2 应用场景

    试管型仪表盘像一个试管,有刻度和进度线,其中刻度表示度量,进度线表示完成的进度情况。

    利用试管型仪表盘,可以直观地表现出某个指标的进度或实际情况,效果如下图所示:

    1587892456659865.png

    1.3 图表特点

    优点:直观的表现出多个指标的进度或实际情况,主要用于进度或占比的展现。

    缺点:不能根据时间类别分析数据,单个图表无法进行对比分析。

    1.4 应用实例

    决策报表中可通过 组件复用 功能,下载安装组件后,直接替换数据即可快速复用组件样式,实现试管型仪表盘效果。

    更多试管型仪表盘组件的示例,可参见 帆软市场-组件 / 设计器→在线组件库。

    组件下载链接描述效果图
    试管型仪表盘-简约蓝
    可以直观地表现出某个指标的进度或实际情况试管型仪表盘-简约蓝.png
    试管型仪表盘-深色
    可以直观地表现出某个指标的进度或实际情况,主要用于进度或占比的展现
    试管型仪表盘-深色.png

    2. 属性介绍

    2.1 类型

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

    2020-04-11_20-28-25.png

    2.2 数据

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

    分类名:百分比对应的分类名称。

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

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

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

    注2:2020-07-06 及之后版本的 JAR 包新增指针值和目标值设置项。

    Snag_3280e3a7.png

    2.3 样式

    试管型仪表盘样式设计的详细介绍可以参见文档:图表样式

    2.3.1 系列

    试管型仪表盘的「样式>系列」设置项跟基础样式有所不同,简单介绍:

    1)颜色:

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

    1624280562297843.png

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

    注:10.0.17 版本之前的设计器中仅有「按值划分」的配色逻辑。

    Snag_2943c205.png

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

    1624281094619181.png

    2)布局/样式

    • 排列方向:可以控制试管型仪表盘的方向,分为纵向和横向,默认为「纵向」。

    • 指针:指针是指进度条最前端的圆形图标颜色,默认为透明。

    • 刻度槽:此处控制试管的刻度槽背景颜色,默认为浅灰。

    • 长度设置:控制试管型仪表盘的长度,分为自动和固定两种类型。

    • 滑槽宽度:控制内部滑槽的宽度。

    1624282215752829.png

    2.3.2 标签

    1)标签支持改变文本排列方向

    如果试管型仪表盘的「样式>系列」下的排列方向为「横向」。

    1.png

    那么试管型仪表盘的「样式>标签」下会显示「布局」设置项,用户可以设置标签的「文本方向」,选择纵向时文字旋转 +90° 排列。

    2.png

    纵向效果如下图所示:

    3.png

    2)标签支持居中展示

    10.0.12 及之后版本的试管型仪表盘系列为「纵向」布局时,其「百分比标签」和「值标签」支持居中展示,如下图所示:

    Snag_67f140c.png

    标签居中效果如下图所示:

    1608775430700995.png

    2.3.3 坐标轴

    • 轴标签:可控制轴标签是否显示或隐藏。

    • 字符:可选择字体、字符、颜色、斜体、加粗等属性。

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

    • 自定义主刻度单位:可定义主刻度单位,可采用公式输入。

    • 自定义次刻度单位:可定义次刻度单位,可采用公式输入。

    • 主要刻度线:可设置主要刻度线颜色,默认为浅灰色。

    • 次要刻度线:可设置次要刻度线颜色,默认为浅灰色。

    • 轴标签格式:分为通用、自定义两种,默认为通用。

    注:2020-07-06 及之后版本的 JAR 包坐标轴有变动,只能设置最小值。

    Snag_32a4106a.png

    2.4 特效

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

    注:试管型仪表盘的特效设置项下没有条件显示。

    3. 示例

    3.1 报表设计

    3.1.1 数据准备

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

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

    where 产品.类别ID=类别.类别ID and 类别名称 in ("海鲜" ,"点心", "饮料")

    group by 类别名称

    Snag_6849808.png

    3.1.2 组件设计

    将试管型仪表盘拖拽到 body 组件中,调整图表位置,如下图所示:

    1587892584224387.png

    3.1.3 数据绑定

    数据来源为「数据集数据」,选择数据集 ds1,分类名为「类别名称」,指针值为「kc」,目标值选择「自定义」设置为 800。如下图所示:

    Snag_687ac0f.png

    3.1.4 样式设计

    根据实际需要设置样式,这里设置了标题、系列排列方向为「纵向」、系列「指针」为白色、标签显示「目标值」。如下图所示:

    注:10.0.16 版本及之后,「值标签」支持显示「目标值」,默认不勾选。

    1620913367416079.png

    3.2 效果预览

    3.2.1 PC 端

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

    Snag_21210192.png

    3.2.2 移动端

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

    Snag_2121fe23.png

    4. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\BasicChart\试管型仪表盘.frm

    点击下载模板:试管型仪表盘.frm

    附件列表


    主题: 图表应用
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    请前往「服务平台」,选择「在线支持」

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

    总裁办24H投诉

    热线电话:173-1278-1526