图表手动切换

  • 文档创建者:Holly
  • 编辑次数:18次
  • 最近更新:Kevin-s 于 2019-11-18
  • 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

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

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

    2.2 效果查看

    PC 效果图如下:

    222

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

    3. 模板下载

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

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

    4. 注意事项

    注:所有添加图表只对关键步骤,进行介绍,普通样式需要根据自己需求进行设置

    注:其中条形图特效中的图片可以根据自己需求自定义设置,使用谷歌,百度等搜索适合自己需求的图片


    附件列表


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