试管型仪表盘

  • 文档创建者:susie
  • 编辑次数:24次
  • 最近更新:Leo.Tsai 于 2020-07-06
  •  1. 概述

    1.1 应用场景

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

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

    Snag_a4d9c07.png

    1.2 图表特点

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

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

    2. 属性介绍

    2.1 类型

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

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

    2.2 数据

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

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

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

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

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

    Snag_3280e3a7.png

    百分比计算公式:(指针值-最小值)/(目标值-最小值)

    注:最小值指的是坐标轴处设置的最小值,详情参见下面样式的说明。

    2.3 样式

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

    1)试管型仪表盘的样式>系列有特殊设置,单独介绍:

    • 配色:可以切换试管型仪表盘的色彩搭配,目前有 8 种。

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

    • 指针:此处控制指针的颜色,默认为透明。

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

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

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

    • 刻度和配色:控制试管型仪表盘的刻度颜色。

    Snag_257cea8c.png

    2)试管型仪表盘的样式>标签有特殊设置,单独介绍:

    标签的位置现在分为上下位置左右位置,默认标签在下方,且跟随指针显示。

    Snag_258aace2.png

    3)试管型仪表盘的样式>坐标轴有特殊设置,单独介绍:

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

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

    • 自定义最小值:勾选后可以自定义最小值,该值跟形成分子和分母有关系,详情参见上面百分比计算公式。

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

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

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

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

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

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

    Snag_32a4106a.png

    2.4 特效

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

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

    3. 示例

    3.1 报表设计

    3.1.1 数据准备

    新建数据集 ds1,数据库查询语句如下:

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

    where 产品.类别ID=类别.类别ID and 类别名称!="日用品"

    group by 类别名称

    2020-04-11_20-41-50.png

    3.1.2 组件设计

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

    1587892584224387.png

    3.1.3 数据绑定

    试管型仪表盘的数据绑定方法如下图所示:

    Snag_32a642bb.png

    3.1.4 样式设计

    坐标轴设置项下勾选自定义最小值,设置最小值为0,也可以不勾选自定义最小值,效果是一样的。

    Snag_32a833ae.png

    注:为使移动端效果更佳,建议将试管型仪表盘的样式>系列>方向,改为纵向。

    3.2 效果预览

    1)PC 端

    保存报表,点击表单预览,效果如下图所示:

    Snag_a4d9c07.png

    2)移动端

    1587892659231615.jpg

    4. 模板下载

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

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

    附件列表


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