历史版本24 :图表切换属性 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 应用场景

为了实现在同一页面在线切换展示不同图表,我们可以在图表类型处添加多个图表,通过「按钮切换」或「轮播切换」的方式来切换查看不同的图表。预期效果如下图所示:

按钮切换:点击标题进行切换。

1623035728743568.gif

轮播切换:按设置的间隔时间自动轮播。

1623052213962494.gif

1.2 功能简介

在图表类型中,添加多个图表后,点击最右侧的设置按钮,弹出「图表切换属性」设置框,可选择切换方式为「按钮」或「轮播」。如下图所示:

1623037396811977.png

注:图表切换只针对设置的图表 index 生效。如只设置了第二个图表自动刷新,则只有第二个图表执行刷新操作。

2. 示例编辑

2.1 打开模板

本文主要介绍图表的切换方式,此处不赘述图表的添加和设置,直接打开模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\GraphSwitching\按钮式图表切换.cpt

2.2 按钮切换

1)在右侧选择类型,点击设置按钮,选择切换方式为「按钮」,同时设置按钮的字体样式和背景,如下图所示:

Snag_1b00c4e2.png

2)按钮上的文字内容即各图表的标题,我们需要给每个图表设置标题,设置标题后可再将「标题可见」取消勾选。如下图所示:

1623050297325086.png

3)预览模板时可看到:按钮内容由「图表类型图标+图表标题」组成。如下图所示:

注:当按钮内容过多超出显示范围,鼠标悬浮在按钮上时会提示完整文字内容。

1623046990420647.png

2.3 轮播切换

1)在右侧选择类型,点击设置按钮,选择切换方式为「轮播」,设置轮播箭头为「隐藏」,时间间隔为 3 秒,轮播背景为灰色。如下图所示:

  • 轮播时间间隔可设置为大于等于 0 的整数,设置为 0 时不自动轮播,可点击箭头或圆点切换图表。

  • 背景为箭头和圆点的背景颜色。

Snag_1b1d6521.png

2)设置各图表的标题,勾选「标题可见」。

3)预览模板可看到图表会定时轮播切换:鼠标点击图表左右的箭头或图表下方的轮播圆点,可即时切换图表。轮播过程中,鼠标进入图表区会停止轮播,移开鼠标后,等待 3 秒(设置的时间间隔)图表继续轮播。

1623048770394175.png

2.4 效果预览

2.4.1 PC 端

保存报表,点击「分页预览」,PC 端效果如 1.1 节所示。

2.4.2 移动端

无论是按钮切换还是轮播切换,移动端都显示为箭头+圆点的切换方式,区别仅在于轮播切换可自动轮播切换,按钮切换需手动点击切换。轮播切换效果如下图所示:

71DCBB19-E1A0-4E10-BE28-4009922ACADD.GIF


3. 模板下载编辑

已完成模板可参见:

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\GraphSwitching\按钮式图表切换.cpt

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\GraphSwitching\轮播式图表切换.cpt

点击下载模板:

按钮式图表切换.cpt

轮播式图表切换.cpt