多饼图共享图例

  • 文档创建者:文档助手1
  • 编辑次数:12次
  • 最近更新:Leo.Tsai 于 2020-05-27
  • 1. 概述

    1.1 应用场景

    饼图支持每个分类生成一个饼图,且这些多分类的饼图之间共享图例,如下图所示:

    Snag_1affe8da.png

    1.2 实现思路

    添加图表后,设置分类字段,根据分类生成多个饼图。

    注:该方法同时支持单元格元素图表和悬浮元素图表。

    2. 示例

    2.1 数据准备

    新建普通报表,新建数据集 ds1 ,数据库查询语句为:SELECT * FROM 销量

    1590562414286042.png

    2.2 表格设计

    1)如下图设计单元格表格,并将相应字段拖入单元格中,其中 B2 单元格需要汇总-求和

    Snag_1b04b8d8.png

    2)双击 A2 单元格,点击高级,设置结果集筛选为 3 个,目的是只取数据集中前 3 个销售员的数据,如下图所示:

    1590562747283761.png

    3)选中 A1 和 A2 单元格,添加一个条件属性,设置行高为 0 ,目的是在前端展示时可以隐藏掉表格内容,如下图所示:

    Snag_1b0cc5b3.png

    2.3 插入图表

    设计器菜单栏点击插入>悬浮元素>插入图表,将饼图插入到普通报表中,如下图所示:

    Snag_1b119f66.png

    2.4 绑定数据

    选中饼图,设置饼图分类名为 A2 单元格,系列名为 B1 单元格,值为 B2 单元格,如下图所示:

    Snag_1b154413.png

    2.5 效果预览

    1)PC 端

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

    Snag_1affe8da.png

    2)移动端

    示例采用的是悬浮图表不支持移动端预览,但是单元格元素图表可以。

    2.6 应用拓展

    如果想要通过单元格元素图表实现,只需要在上面悬浮元素图表设置的基础上,更改下数据绑定设置,如下图所示:

    Snag_1b1cea92.png

    3. 模板下载

    已完成模板参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\PieChart\共享图例饼图.cpt

    点击下载模板:共享图例饼图.cpt

    附件列表


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