图表轮播切换

  • 文档创建者:Kevin-s
  • 编辑次数:3次
  • 最近更新:Kevin-s 于 2019-11-18
  • 1. 概述

    为了实现在同一页面在线切换展示不同图表,可以使用轮播功能来切换查看不同的图表。

    2. 示例

    2.1 添加图表

    2.1.1 添加签约指标完成情况组合图

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

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

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

    选中图表在右侧选择样式-系列-柱形图,设置柱形图样式,如下图:

    image.png

    选中图表,在右侧选择样式-系列-柱形图,设置折线图样式,如下图:

    image.png

    2.2.2 添加回款指标完成情况组合图

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

    image.png

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

    image.png

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

    image.png

    注:样式设置如2.1.1类似,可依据自己需求进行设置


    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

    2.2.6 添加新签约土地面积图 

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

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

    image.png

    2.2.7 图表切换属性

    在右侧选择类型,点击设置轮播,选择切换方式为轮播,同时设置轮播是否显示,轮播的时间间隔,以及轮播背景,如下图所示:

    image.png

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

    2.2 效果查看

    PC 效果图如下:

    Td2dX692UP.gif

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

    3. 模板下载

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

    点击下载模板:轮播式图表切换.cpt

    4. 注意事项

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


    附件列表


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