反馈已提交

网络繁忙

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

多指针仪表盘

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

    1.1 应用场景

    多指针仪表盘像一个钟表或者可读盘,它有刻度和指针,其中刻度表示度量,指针表示维度,指针角度表示数值,指针指向当前数值。

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

    1)多指针的仪表盘360度

    1587890617560865.png

    2)多指针的仪表盘180度

    1587890680154858.png

    1.2 图表特点

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

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

    1.3 应用实例

    复用组件下载后可直接在设计器内安装复用,即可实现多指针仪表盘效果,无需进行代码编辑;

    更多多指针仪表盘组件的示例,可参见 帆软市场-组件 / 设计器→在线组件库,组件复用相关文档请参见:组件复用 。

    组件下载链接
    描述
    效果图
    环形边框仪表盘-梦幻紫

    1)该组件适用于梦幻紫风格模板

    2)仪表盘和环形图相结合,直观表现出某些指标进度的同时又可以突出占比关系

    环形边框仪表盘-梦幻紫.png
    多指针仪表盘-浅色

    1)该组件适用于浅色简约风格模板

    2)直观地表现出某个指标的进度或实际情况,主要用于进度或占比的展示


    多指针仪表盘-浅色.png

    2. 属性介绍

    2.1 类型

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

    2020-04-11_17-35-40.png


    2.2 数据

    仪表盘数据绑定的详细介绍可以参见文档:图表数据

    2.3 样式

    仪表盘基础样式介绍可以参见文档:图表样式

    2.3.1 系列

    仪表盘的样式>系列有特殊设置,下面单独介绍:

    1)颜色

    仪表盘刻度的配色方案,下拉可以选择系统内置的方案或者自定义方案,如下图所示:

    Snag_252d0c70.png

    2)布局

    按分类名称展示仪表盘时,会出现多个仪表盘,此时可以改变这些仪表盘的排列方向。

    Snag_253bd9ee.png

    3)样式

    • 枢纽:选择仪表盘中央枢纽的颜色。

    • 枢纽背景:选择仪表盘中央枢纽周围的背景色。

    • 指针:选择指针的颜色。

    • 底盘背景:选择仪表盘整体的底盘背景色。

    • 半径设置:选择自动即采用默认半径;选择固定,可自定义仪表盘的半径。

    Snag_253cd94d.png

    4)范围

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

    Snag_25437d7f.png

    2.3.2 标签

    仪表盘的样式>标签有特殊设置,下面单独介绍:

    值标签下的字号选择自动,那么字体会根据仪表盘大小自动调整大小。

    Snag_259e25ee.png

    2.3.3 坐标轴

    仪表盘的样式>坐标轴有特殊设置,下面单独介绍:

    轴标签的字号选择自动,那么字体会根据仪表盘大小自动调整大小。

    轴标签的颜色选择自动,那么轴标签的颜色会根据系列色显示。

    Snag_25a64f78.png

    2.4 特效

    仪表盘特效设置参见文档:图表特效

    3. 示例

    3.1 报表设计

    3.1.1 数据准备

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

    select 类别名称,库存量,订购量,再订购量 from 产品,类别

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

    2020-04-11_18-33-35.png

    3.1.2 组件设计

    将 2 个多指针的仪表盘拖拽到 body 组件中,分别设置成 2 个不同的子类型,调整它们之间的位置关系,如下图所示:

    2020-04-11_18-20-05.png

    3.1.3 数据绑定

    2 个子类型的数据绑定方法是一样的,如下图所示:

    2020-04-11_18-34-11.png

    3.1.4 样式设计

    多指针的仪表盘的样式只需要改个标题,其余默认设置即可。

    3.2 效果预览

    1)PC 端

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

    1587890946221328.png

    2)移动端

    1587891120735561.jpg

    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