反馈已提交

网络繁忙

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

轮播像素点图

  • 文档创建者:Leo.Tsai
  • 历史版本:3
  • 最近更新:Leo.Tsai 于 2022-03-30
  • 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

    附件列表


    主题: 图表应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    请前往「服务平台」,选择「在线支持」

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526