反馈已提交

网络繁忙

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

图表设置闪烁动画

  • 文档创建者:Holly
  • 历史版本:20
  • 最近更新:yzm255836 于 2021-12-22
  • 1. 概述

    1.1 应用场景

    极值代表业务能力的端点和问题点,数据分析时,用户对最大值和最小值比较重视,那么图表中如何来强调这两个指标呢,一般我们可以通过使用闪烁动画来实现,效果如下所示。

    222

    1.2 实现思路

    图表特效>条件显示下,通过添加闪烁动画类型的条件属性实现。

    1.3 应用实例

    复用组件下载后可直接在设计器内安装复用,即可实现图表设置闪烁动画效果,无需进行代码编辑;

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

    组件下载链接
    描述
    效果图
    图表条件闪烁-清新风

    1)该组件适用于浅色清新风格模板

    2)图表中设置闪烁动画的类型,使柱子改变配色并闪烁,达到强调展示的效果

    提示点自定义柱形图.gif
    图表条件闪烁-科技风

    1)该组件适用于深色酷炫风格模板

    2)图表中设置闪烁动画的类型,使柱子改变配色并闪烁,达到强调展示的效果

    图表条件闪烁-科技风.gif

    2. 示例

    2.1 设计模板

    新建普通报表,选中一片单元格,合并单元格为A1,选择单元格元素->插入元素->插入柱形图 ,柱形图类型选择 普通柱形图,如下图所示:

    image.png

    2.2 准备数据

    新建普通报表,添加内置数据集各类 App 活跃用户,如下图所示:

    2.3 设置图表数据

    选中图表,在右侧选择单元格元素->-数据,选择数据来源为 数据集数据,绑定分类为app ,设置系列名为per ,如下图所示:
    image.png

    2.4 设置图表样式

    选择样式>系列,配色选择自定义>精确设置,将第一个颜色改为蓝色,风格选择关闭,固定柱子宽度为 20圆角无边框线,如下图所示:
    image.png

    选择样式>坐标轴>X轴,文本旋转 90 度,间隔固定=1,如下图所示:
    image.png

    选择样式>坐标轴>Y 轴,设置轴标签格式:百分比,如下图所示:
    222

    选择样式>背景>绘图区,将网格线设置为透明,添加警戒线,当做X轴,如下图所示:
    image.png

    2.5 设置图表特效

    选择特效>条件显示,添加 1 个条件属性 1闪烁动画运动周期默认,配色选择蓝色,设置值等于 A2,A2 单元格的表达式=max(各类 App 活跃用户.select(per)),用于筛选最大值,如下图所示:

    image.png

    注:设置运动周期为 0s 时,无动画效果;根据设计,不同类型的图表动态效果默认周期时间不一致 。

    再添加一个条件属性 2,属性同上,将配色修改为粉色,设置值等于 B2,B2 单元格的表达式=min(各类 App 活跃用户.select(per)),用于筛选最小值。如下图所示:

    image.png

    注1:同样的方法可以控制柱子边框,标签,提示点等。

    注2:决策报表报表块也支持闪烁动画属性

    2.6 效果预览

    1)PC 端

    保存模板,点击分页预览,效果如下所示:

    222

    2)移动端

    B7EB359D-55CC-4E70-8D6A-41FBC81F47A0.GIF

    3. 模板下载

    已完成模板:%FR_HOME%\webroot\WEB-INF\reportlets\doc\Advanced\Chart\NewColumnChart\FlashingColumChart.cpt

    点击下载模板:FlashingColumnChart.cpt


    附件列表


    主题: 图表应用
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

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

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

    总裁办24H投诉

    热线电话:173-1278-1526