轮播像素点图

1.1 版本说明

1.2 应用场景

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

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

1.3 功能介绍

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

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

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

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

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

1.4 插件安装

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

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

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

1.5 图表入口

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

2.1 数据

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

2.2 样式

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

2.2.1 区间配置

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

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

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

2.2.2 样式

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

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

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

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

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

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

2.2.3 动画

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

• 顺序

• 乱序
  

2.3 特效

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

3.1 准备数据

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

3.2 插入图表

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

3.3 绑定数据

绑定图表数据，配置如下图所示：

3.4 配置区间

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

3.5 效果预览

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

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

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\chart\extend\轮播像素点图.cpt

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