[新]图表切换

编辑
  • 文档创建者:Holly
  • 浏览次数:8824次
  • 编辑次数:11次
  • 最近更新:ukae 于 2019-01-22
  • 1. 功能描述

    图表切换即在同一页面在线切换展示不同图表,可以选择按钮(button)和轮播(carousel)两种切换方式。
    1.1 示例一button形式
    图表区内部上方,按照图表切换的个数平均分布各个图表切换控件,切换效果如下:
    注:如果图表名称缩略显示了,则鼠标移动到对应的控件位置时,在控件下方居中显示图表名称的数据点提示。
    1.2 示例二carousel形式
    可设置自动播放时间间隔,则从初始化状态开始,按照间隔,依次向右切换图表进行循环播放。
    点击左右两侧的轮播箭头,则可实现向左或向右切换。如果已经处于最后一个图表,则再点击右侧轮播箭头,从左侧第一个开始展示;点击左侧轮播箭头则相反;另外,若不想要箭头,还可以将其隐藏。
    图表区下方的轮播切换圆点,代表当前图表状态,当前展示的图表对应的圆点突出显示,悬浮对应的圆点,提示该圆点对应的图表名称,点击后,可立刻切换到对应的图表。切换效果如下:

    注: 鼠标悬浮于图表区上,中断轮播状态;鼠标移开图表区间隔时间后,继续轮播状态。

    2. 示例一

    2.1 制作模板

    新建内置数据集地域分布

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


    选中图表,在右侧选择类型,修改标签名称为地图,依次设置图表的类型、数据、样式和特效,这里不再一一介绍



    2.2 添加图表类型
    新增一个内置数据集访客属性年龄
    在右侧选择类型,点击新增一个图表2标签


    双击图表2标签重命名为条形图,选择条形图(新特性),依次设置图表的类型、数据、样式和特效,这里不再一一介绍



    注:如果新建的第一个图表为新图表,则新增图表切换后,图表类型面板内只能在新图表之间切换;如果新建的第一个图表为老图表,则新增图表切换后,图表类型面板内只能在老图表之间切换。

    重复上述步骤,增加需要的内置数据集和图表类型,并依次设置图表的类型、数据、样式和特效,如下图所示:




    2.3 图表切换属性

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


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

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

    2.4 保存与预览

    保存模板,点击分页预览,即可看到如上图示例一所示效果。

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

    3. 示例二

    3.1 模板制作

    模板制作方式可参考示例一,图表切换属性选择轮播切换方式,可设置其轮播箭头显示与否、自动切换的时间间隔与箭头的背景颜色,如下图所示:



    3.2 保存与预览

    保存模板,点击分页预览,即可看到如上图示例二所示效果。

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

    附件列表


    主题: 图表应用
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]