多层饼图层级联动

  • 文档创建者:caott666
  • 编辑次数:6次
  • 最近更新:Leo.Tsai 于 2020-05-26
  • 1.概述

    1.1 应用场景

    点击 多层饼图 不同层级时,可以链接到该层级对应的其他图表数据,联动效果如下图所示:

    1590476837600413.gif


    1.2 实现思路

    将多层饼图设置为主表,将各层级对应的其他图表都放在同一张子表中。

    子表中设置行高类型的条件属性,将主表层级参数跟子表行高参数对应起来,联动时通过参数控制行高,进而只显示指定层级的图表。

    2. 示例

    2.1 数据准备

    新建数据查询 ds1,数据库查询语句为:SELECT * FROM 订单 where 货主国家='中国' limit 50

    1589368203691075.png

    2.2 插入图表

    1)新建普通报表多层饼图层级联动主表,合并一片区域单元格,右键该单元格,选择单元格元素>插入图表>多层饼图,如下图所示:

    1590479092985347.png


    2)新建普通报表多层饼图层级联动子表,合并三片区域单元格,右键这些单元格,选择单元格元素>插入图表>柱形图,如下图所示:

    1590479110521922.png

    2.3 数据绑定

    1)绑定多层饼图层级联动主表多层饼图的数据,如下图所示:

    2020-05-19_22-00-55.png

    2)绑定多层饼图层级联动子表三个柱形图的数据,如下图所示:

    2020-05-19_22-06-56.png

    2.4 主表样式设置

    1)选择样式>标签,为了清楚地显示饼图对应的系列,可勾选牵引线,具体设置如下图所示:

    2020-05-19_22-15-07.png

    注:多层饼图的牵引线设置/标签显示在外部只对最外层生效,内部层级标签强制显示在内部。

    2)选择样式>系列,默认内径占比为 0 ,开启钻取,如下图所示:

    2020-05-19_22-18-14.png

    注1:当设置内径时,去除内径大小外,所有的层级均分整体半径。

    注2:钻取之后,无论是否设置了内径,中间的饼图半径占整体半径的 50%,其余层级均分剩余的半径。

    注3:点击中心白色圆圈,即可返回上一层。

    2.5 子表条件属性设置

    1)选择各地区平均运货费分析柱形图,添加条件属性,设置行高为 0 ,配置参数a=2 or a=3,如下图所示:

    注:行高为 0 表示隐藏该图表,此处的参数 a 对应的是多层饼图的层级,当层级为 1 时显示该图表,当层级为 2 或 3 时隐藏该图表,下面同理设置。

    2020-05-19_22-21-43.png

    2)选择各省份平均运货费分析柱形图,添加条件属性,设置行高为 0 ,配置参数a=1 or a=3,如下图所示:

    2020-05-19_22-25-35.png

    3)选择各城市平均运货费分析柱形图,添加条件属性,设置行高为 0 ,配置参数a=1 or a=2,如下图所示:

    2020-05-19_22-29-03.png

    2.6 主表超链设置

    主表多层饼图选择特效>交互属性>添加链接,选择网络报表,选择多层饼图层级联动子表,参数名需跟子表条件属性中的行高参数对应,值为公式层级序号,如下图所示:
    Snag_1619c4ac.png

    2.7 效果预览

    1)PC 端

    保存报表,点击分页预览,点击对应层级显示该层级的平均运货费柱形图,如下图所示:

    1590476837600413.gif

    2)移动端

    1590480516165173.gif

    3. 模板下载

    已完成模板可参见:

    %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\BasicChart\多层饼图层级联动主表.cpt

    %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\BasicChart\多层饼图层级联动子表.cpt

    点击下载模板:

    多层饼图层级联动主表.cpt

    多层饼图层级联动子表.cpt

    附件列表


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