最新历史版本 :轮播像素点图 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 版本说明

报表服务器版本扩展图表插件版本
10.0V4.3

1.2 应用场景

扩展图表插件 4.3 版本仪表盘类新增一种子类型:轮播像素点图。

该图表适用于大屏场景,可用于轮播展示多个百分比数据,也可以用于实时监测百分比数据变化,例如实时监控 cpu 和内存运行占比。效果如下图所示:

BC9A92A7-DCD5-4506-B347-1D313C5F7F4C (1).GIF

1.3 功能介绍

  • 支持数据轮播和定时刷新。

  • 图表样式支持设置标题、标签、图形、背景。

  • 支持自定义轮播间隔,下限值为 4 秒。

  • 支持显示负数百分比,但没有高亮的像素图形。

  • 支持图表联动和组件刷新,详细介绍参见文档:扩展图表组件刷新

1.4 插件安装

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

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

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

1.5 图表入口

图表类型的扩展图表-仪表盘类下新增像素点图,可选择插入到报表中。

Snag_48859704.png

2. 图表属性编辑

2.1 数据

百分比的计算逻辑:指标值/目标值,目标值也可以设置为自动,自动时默认给一个目标值参与运算。

Snag_48892df6.png

2.2 样式

样式主要说下图形的设置,此处可以自定义像素点的表现形式。

Snag_4d34ab01.png

2.2.1 区间配置

此处用于设置像素点的颜色,不同百分比区间内像素点颜色不同。

  • 自动:系统默认的区间配置,分为 3 段,配置如下图所示:

Snag_48929918.png

  • 自定义:用户可以自己分段,最多可设置 6 段,需要自定义每段的左右区间和颜色,如下图所示:

Snag_489a700d.png

2.2.2 样式

此处可设置像素点个数和间隔。

  • 单行点个数:一行有多少个像素点,不支持手动输入,只能下拉选择。

  • 像素点填充:设置像素点填充组件的效果。

  • 点间隔:像素点之间的距离大小,支持手动输入。

Snag_4d360949.png

当像素点填充为单向填充时,像素点比例不变,会根据组件宽高,选择某一方向填充满,效果如下图所示:

1606798457831208.png

当像素点填充为双向填充时,像素点会横纵向全部填充满组件,效果如下图所示:

1606798528529702.png

2.2.3 动画

像素点加载的动画效果,共有 2 种,效果分别如下:

Snag_489fafdc.png

  • 顺序

1606721295332015.gif

  • 乱序

1606721347893104.gif

2.3 特效

特效处可设置定时刷新、轮播间隔、轮播联动,如下图所示:

Snag_48a20e3f.png

3. 示例编辑

3.1 准备数据

新建普通报表,新建内置数据集,此处为模拟内存实时变化,设置了 3 条数据,实际场景中用户可开启定时刷新来监控,如下图所示:

Snag_48a3fd7c.png

3.2 插入图表

合并一片区域单元格,插入轮播像素点图,如下图所示:

1606721611734160.png

3.3 绑定数据

绑定图表数据,配置如下图所示:

Snag_48a6d063.png

3.4 配置区间

自定义区间和对应的像素点颜色,像素点填充方式选择单向填充,如下图所示:

Snag_4d3e9584.png

3.5 效果预览

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

BC9A92A7-DCD5-4506-B347-1D313C5F7F4C (1).GIF

注:扩展图表不支持移动端。

4. 模板下载编辑

已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\BasicChart\轮播像素点图.cpt

点击下载模板:轮播像素点图.cpt