最新历史版本 :百分比刻度槽型仪表盘 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

 1. 概述编辑

1.1 版本

报表服务器版本
11.0

1.2 应用场景

百分比刻度槽型仪表盘是一个不完整的圆环,展示某一项的占比情况,有类别、百分比、数值等指标数据。

利用百分比刻度槽型仪表盘,可以直观地表现出指标与达成数据的达成率,可以展示销售完成率、产品合格率等,也可以作为一个进度百分比展示。

它跟 百分比圆环仪表盘 的区别在于圆环采用了刻度槽样式。效果如下图所示:

1620892484754552.png

1.3 图表特点

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

缺点:不能直观的展示数据趋势变化,不适用多种数据对比分析。

注:FVS的图表组件如何设置请点击此链接: FVS图表组件

2. 属性介绍编辑

2.1 类型

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

2.2 数据

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

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

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

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

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

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

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

2.png

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

1620893034955109.png

2.3.3 坐标轴

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

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

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

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

Snag_328b7642.png

2.4 特效

百分比刻度槽型仪表盘特效设置的详细介绍可以参见文档:图表特效 。

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

3. 示例编辑

3.1 报表设计

3.1.1 数据准备

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

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

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

数据查询1.png

3.1.2 组件设计

方法一: 首先选中多个单元格合并>选中合并后的单元格>点击插入元素>选择插入图表>点击仪表盘>拖拽右侧滑动栏>点击百分比刻度槽型仪表盘>点击确认.

方法二: 首先选中多个单元格合并>选中合并后的单元格>点击插入元素>选择插入图表>选择任意一种图>点击确认>点击右侧类型界面中默认下方的选择栏>选择仪表盘>选择下方的百分比刻度槽型仪表盘.

以方法一为例,如下图所示:

图形组件1.png

3.1.3 数据绑定

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

数据绑定.png

3.1.4 样式设计

根据实际需要设置样式,这里设置了标题、标签显示「目标值」。如下图所示:

自定义1.png

3.2 效果预览

3.2.1 PC 端

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

PC预览.png

3.2.2 移动端

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

移动预览.jpg

4. 模板下载编辑

点击下载模板:百分比刻度槽 .cpt