图表手动切换

  • 文档创建者:Holly
  • 编辑次数:21次
  • 最近更新:Leo.Tsai 于 2020-07-01
  • 1. 概述

    为了实现在同一页面在线切换展示不同图表,可以选择点击按钮(button)来切换查看不同的图表。

    2. 示例

    2.1 添加图表

    2.1.1 添加地图

    新建内置数据集,如下图:
    image.png

    以单元格图表为例,合并一片单元格,点击插入>单元格元素>插入图表,选择地图,如下图:
    222

    选中图表,在右侧选择类型,修改类型设置如下图:
    image.png

    选中图表,在右侧选择数据,设置数据如下图:

    image.png

    2.2.2 设置条形图

    在右侧选择类型,点击新增一个图表 2 标签

    image.png

    选中图表,在右侧选择类型,修改类型设置如下图:
    image.png

    选中图表,在右侧选择数据,设置数据如下图:

    image.png

    选中图表,在右侧选择特效,柱形图分类图改用男女头像,分类1和2设置,条件属性1设置如下图:

    image.png

    条件属性2设置,如下图:

    image.png

    注:分类序号值应该选择整型。

    2.2.3 添加饼图

    添加图表后,选中图表,在右侧选择类型,修改类型设置如下图:
    image.png

    选中图表,在右侧选择数据,设置数据如下图:

    image.png

    选中图表,在右侧选择样式-系列,设置内径,实现环形饼图,如下图:

    image.png

    2.2.4 添加柱形图

    添加图表后,选中图表,在右侧选择类型,修改类型设置如下图:
    image.png

    选中图表,在右侧选择数据,设置数据如下图:

    image.png

    选中图表,在右侧选择样式-系列,实现带圆角柱形图,如下图:

    image.png

    2.2.5 添加气泡图

    添加图表后,选中图表,在右侧选择类型,修改类型设置如下图:
    image.png

    选中图表,在右侧选择数据,设置数据如下图:

    image.png

    选中图表,在右侧选择样式-系列,实现修改气泡大小,如下图:

    image.png

    2.2.6 图表切换属性

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

    image.png

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

    注2:切换按钮上的文字即图表标题,若不想显示,则可将图表标题删除,再设置不显示标题即可。

    2.2 效果查看

    1)PC 端

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

    6E3DC9A6-357E-4B00-ADB2-44D25B7B4439.GIF

    注:如果图表名称缩略显示了,则鼠标移动到对应的控件位置时,在控件下方居中显示图表名称的数据点提示。

    2)移动端

    移动端采用左右切换按钮进行切换,效果如下图所示:

    5478E316-8155-4730-AC6E-D16C6522B70A.GIF

    3. 模板下载

    已完成模板可参考%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\GraphSwitching\按钮式图表切换.cpt

    点击下载模板:按钮式图表切换.cpt


    附件列表


    主题: 图表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!