图表联动

  • 文档创建者:Leo.Tsai
  • 编辑次数:2次
  • 最近更新:枫城 于 2020-07-15
  • 1. 概述

    1.1 应用场景

    报表分析和讲述时,在分享者点击报表相应属性后,人们往往希望看到其关联属性的变化。

    因此图表联动必不可少,其不光可以带来更好的视觉感受,也能更好的表达及阐述报表呈现的内容,引起聆听者的思考。图表联动效果如下所示:

    1594708689123858.gif

    1.2  实现思路

    向决策报表拖入报表块和图表,图表和图表间的联动通过超级链接实现,如下图所示:

    2.png

    注:普通报表的联动也可通过超链接实现。


    2. 示例

    2.1 准备数据

    1)chart0 柱形图绑定的数据源命名为:员工销售额/回款额top10,SQL 语句为: 

    select distinct a.姓名,round(${e1},2) as 字段 from 

    /* 销售额*/

    (SELECT  姓氏||名字 as 姓名,sum(单价*数量*(1-折扣)) as 销售额

    FROM S雇员,S订单,S订单明细

    where S雇员.雇员ID=S订单.雇员ID and S订单.订单ID=S订单明细.订单ID 

    group by 姓氏||名字

    order by sum(单价*数量*(1-折扣)) desc ) as a,

    /* 回款额*/

    (SELECT  姓氏||名字 as 姓名,sum(单价*数量*(1-折扣)) as 回款额

    FROM S雇员,S订单,S订单明细

    where S雇员.雇员ID=S订单.雇员ID and S订单.订单ID=S订单明细.订单ID and s订单.是否已付='是' 

    group by 姓氏||名字

    order by sum(单价*数量*(1-折扣)) desc ) as b,回款率

    where a.姓名=b.姓名 and a.姓名=雇员姓名

    order by 字段 desc

    注:type 参数接受分公司的值,e1 接受款项的值(销售额/回款额),姓氏||名字 表示拼接字段。

    2)chart1 堆积面积图绑定的数据源命名为:按月统计订单金额,SQL 语句为:  

    SELECT  strftime('%m',S订单.订购日期) as 月份,sum(单价*数量*(1-折扣)) as 销售额

    FROM S订单,S订单明细,S雇员

    where S订单.雇员ID=S雇员.雇员ID and S订单.订单ID=S订单明细.订单ID and strftime('%Y',S订单.订购日期)='2011' and (S雇员.姓氏||S雇员.名字='${name}' or '${name}'='')

    and (分公司='${type}' or '${type}'='')

    group by strftime('%m',S订单.订购日期)

    注:strftime('%m',S订单.订购日期)表示取订购日期月份。

    3)chart2 折线图绑定的数据源命名为:按月统计回款率,SQL 语句为:

    SELECT a.* FROM 回款率 a inner join S雇员 b on a."雇员姓名"=b.姓氏||名字  

    where (a.雇员姓名='${name}' or  '${name}' ='')

    4)chart3 饼图绑定的数据源命名为:员工订单占比,SQL 语句为:

    SELECT 雇员姓名,所占比 

    FROM 销售额占比 a  inner join S雇员 b on a."雇员姓名"=b.姓氏||名字

    where (雇员姓名='${name}' or '${name}'='')  

    union

    select '其他' , sum(所占比) 

    from 销售额占比  a  inner join S雇员 b on a."雇员姓名"=b.姓氏||名字

    where 雇员姓名<>'${name}'  

     5)chart4 饼图绑定的数据源命名为:员工客户资源占比,SQL 语句为:

    SELECT a.* FROM 各个值段所占  a  inner join S雇员 b on a."雇员姓名"=b.姓氏||名字

    where (雇员姓名='${name}' or '${name}'='')

    注:type 参数接受分公司的值,name 接受销售员的值。

    2.2 设计柱形图

    1)决策报表插入柱形图 chart0,选择类型为普通柱形图,如下图所示:

    1594709562234181.png

    2)绑定图表数据,如下图所示:

    2.png

    3)选中图表块,属性>高级>样式下选择自定义,标题内容设置为公式$e1+"前十名员工(联动)",如下图所示:

    1594709585371366.png

    4)chart0 交互设置

    特效>交互属性下新增超级链接,类型为当前表单对象,设置参数为name,值为公式CATEGORY,如下图所示:

    4.png

    注1:图表超链中所使用的的分类(CATEGORY)、系列(SERIES)、值(VALUE)、地区名(AREA_NAME)都能在公式中当成参数使用。

    注2:传递给子报表的参数名称,与子报表中的参数名称保持一致。

    注3:传递给表单2的数据只需把表单对象转换为 chat2 即可,以此类推。


    2.3 设计堆积面积图

    1)决策报表插入折线图 chart1,选择类型为堆积面积图,如下图所示:

    1594709691305714.png

    2)绑定图表数据,如下图所示:

    2.png

    3) 选中图表块,属性>高级>样式选择自定义,标题内容设置为公式$name+"每月订单金额",如下图所示:

    3.png

    4)样式设置

    样式>提示下显示文本勾选分类名,系列名,值,其余默认,如下图所示:

    4.png

    注:由于 chat1 只作为 chat0 的参数接收方,故不需要进行特效设置。

    2.4 设计折线图

    1)决策报表插入折线图 chart2,选择类型为折线图,如下图所示:

    1594709984103888.png

    2)绑定图表数据,如下图所示:

    2.png

    3)选中图表块,属性>高级>样式选择自定义,标题内容设置为公式$name+"每月回款率",如下图所示:

    3.png

    4)chart2 样式设置

    样式>标签下标签内容勾选,其余默认,如下图所示:

    4.png

    数据点提示勾选分类名、系列名、值,如下图所示:


    5.png

    注:由于 chat2 只作为 chat0 的参数接收方,故不需要进行特效设置。

    2.5 设计环形图

    1)决策报表插入环形图 chart3,选择类型为饼图,如下图所示:

    1594710275945263.png

    2)绑定图表数据,如下图所示:

    2.png

    3)选中图表块,属性>高级>样式选择自定义,标题内容设置为公式$name+"订单占比",如下图所示:

    3.png

    4)样式设置

    数据点提示文本勾选系列名、值,圆角设置为2,填充对应颜色,如下图所示:

    4.png

    样式>系列下修改内径占比为70,制作内圆环,如下图所示:

    image.png

    注:由于 chat3 只作为 chat0 的参数接收方,故不需要进行特效设置。

    2.6 设计饼图

    1)决策报表插入饼图 chart4,选择类型为饼图,如下图所示:

    1594710567901782.png

    2)绑定图表数据,如下图所示:

    2.png

    3)选中图表块,属性>高级>样式选择自定义,标题内容设置为公式$name+"客户资料占比",如下图所示:

    3.png

    4)样式设置

    标签文本勾选百分比,位置则是饼图外,其余默认,如下图所示:

    4.png

    注:由于 chat4 只作为 chat0 的参数接收方,故不需要进行特效设置。

    2.7 效果预览

    1)PC 端

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

    1594708689123858.gif

    2)移动端

    支持移动端预览,预览效果如下图所示:

    CE91C038-C7D1-4E3C-B8E4-AAEA6DB4695C.GIF

    3. 模板下载

    已完成模板参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\analytics\sales\TOP10 员工分析.frm

    点击下载模板:TOP10 员工分析.frm

    附件列表


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