轮播夜光仪表盘

  • 文档创建者:jiangsr
  • 编辑次数:13次
  • 最近更新:Leo.Tsai 于 2020-04-23
  • 1. 概述

    1.1 应用场景

    区别于基础图表中的仪表盘,轮播夜光仪表盘拥有发光效果,一般用于大屏场景展示,效果如下图所示:

    0A1606AD-A2D3-4BB9-8F0B-AF345F76CB23.GIF

    1.2 功能介绍

    • 支持动态显示百分比数值和仪表盘刻度。

    • 支持数据实时更新。

    • 支持调整图形和背景的样式。

    • 支持自定义轮播间隔和图表联动。

    1.3 插件安装

    点击下载插件:扩展图表插件

    设计器插件安装方法参照:设计器插件管理

    服务器安装插件方法参照:服务器插件管理

    2. 示例

    2.1 数据准备

    新建数据集 ds1,数据库查询语句为:SELECT * FROM 销量

    2020-04-21_23-20-01.png

    2.2 报表设计

    1)将扩展图表-仪表盘类拖拽到 body 组件中,调整它的位置,如下图所示:

    2020-04-21_23-11-48.png

    2)绑定图表数据,如下图所示:

    • 播放维度:类似柱形图的类别字段,此处可选择数据集的类别。

    • 指标值:百分比的分子。

    • 目标值:百分比的分母。默认为自动,自动时根据当前值自动计算出目标值大小。

    注:当指标值或目标值中有空值时,对应的空数据过滤不显示;当指标值、目标值有正有负时,对应的数据过滤不显示;当目标值为 0 时,对应的数据过滤不显示。

    2020-04-21_23-17-20.png

    3)图表属性面板选择样式>图形,设置图形属性,如下图所示:

    • 内容:选择是否展示指标值、目标值及百分比,默认展示百分比,并且设置对应的数值格式。

    • 区间配置:区间颜色默认为自动,自动时根据值划分为三段;自定义时,可根据划分阶段设置各阶段颜色。

    2020-04-21_23-43-33.png

    4)图表属性面板选择样式>背景,设置背景属性,如下图所示:

    • 填充:此处可选择没有背景、颜色、图片、渐变色四种,图表默认为深色颜色填充。

    • 不透明度:此处可控制背景的不透明度,默认为 100 。

    2020-04-21_20-33-19.png

    5)图表属性面板选择播放,此处可以设置轮播间隔和图表联动,示例中采用默认设置,如下图所示:

    • 轮播间隔:设置图表的播放间隔,默认为 4s 。

    • 添加联动:轮播联动设置参见文档 地图轮播联动 。

    2020-04-21_23-24-03.png

    2.3 效果预览

    保存模板,选择表单预览,效果如应用场景中所示。

    注:此图表暂不支持移动端。

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\chart\extend\轮播夜光仪表盘.frm

    点击下载模板:轮播夜光仪表盘.frm

    附件列表


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