柱形图

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

    1.1 应用场景

    柱形图是用宽度相同的柱形的高度或长短来表示数据多少的图形。

    利用柱形统计图,可以直观地表示数据量的大小并进行比较,可以比较明显地显示出各数据之间的比例差异。

    1.2 图表特点

    优点:简单直观,很容易根据柱子的长短看出值的大小,易于比较各组数据之间的差别。

    缺点:不适合较大数据集的展现。

    2. 属性介绍

    2.1 类型

    以单元格元素或悬浮元素插入柱形图后,可在右边属性面板的类型设置项下,自由选择4种子类型,如下图所示:

    2020-04-10_23-41-03.png

    2.1.1 柱形图

    普通的柱形图,根据柱子的长短比较各数据量之间的差异。

    2020-04-14_16-54-34.png

    2.1.2 堆积柱形图

    不仅仅可以直观的看出每个系列的值,还能够反映出系列的总和,尤其是当需要看某一单位的综合以及各系列值的比重时,最适合使用堆积柱形图。

    2020-04-14_16-54-52.png


    2.1.3 百分比堆积柱形图

    继承了堆积柱形图的特点,适用于展示比例信息,不展示具体的数值。如果纵向各个系列具体数据不重要,就可选用百分比堆积柱形图,以反映整体占比情况。

    2020-04-14_16-57-42.png


    2.1.4 自定义

    用户可以自定义柱形图的堆积和坐标轴的属性。

    2020-04-14_16-57-58.png


    2.2 数据

    柱形图数据绑定的详细介绍可以参见文档:图表数据

    2.3 样式

    柱形图样式设计的详细介绍可以参见文档:图表样式

    在图表样式通用功能的基础上,自定义柱形图新增了堆积坐标轴属性自定义设置,如下所示:

    1)渐变配色

    2020-07-06 版本及之后版本 JAR 包新增柱形图渐变色配色方案,如下图所示:

    • 自动:根据用户选择的配色方案,自动调整渐变效果

    • 自定义:点击左右角标可以自定义渐变色区间

    • 关闭:不使用渐变色效果

    Snag_2e9d9bb9.png

    2)坐标轴自定义

    自定义柱形图属性面板的样式>坐标轴下新增添加坐标轴按钮,用户可新增其他的X、Y轴,并对新坐标的属性进行设置。

    2020-04-10_23-55-53.png

    3)堆积自定义

    新增的坐标轴需要对应到具体系列的值,样式>系列下新增堆积和坐标轴功能,用户可自定义坐标轴的堆积属性和系列对应关系。

    Snag_2e9aa898.png

    2.4 特效

    柱形图特效设置的详细介绍可以参见文档:图表特效

    柱形图的配色条件属性可以设置渐变色,如下图所示:

    Snag_2e95122d.png

    3. 示例

    3.1 报表设计

    3.1.1 数据准备

    新建数据集 ds1,数据库查询语句如下:

    select 类别名称,库存量,订购量,再订购量 from 产品,类别

    where 产品.类别ID=类别.类别ID and 类别名称!="日用品" 

    order by 类别名称

    1586413981781773.png

    3.1.2 组件设计

    将4个柱形图拖拽到 body 组件中,分别设置成4个不同的子类型,调整它们之间的位置关系,如下图所示:

    2020-04-10_23-50-55.png

    3.1.3 数据绑定

    4个子类型的数据绑定方法是一样的,如下图所示:

    1586414531887388.png

    3.1.4 样式设计

    除了自定义柱形图,其他三种柱形图的样式只需要改个标题,其余默认设置即可。

    下面单独介绍自定义柱形图的样式设计:

    1)选择自定义柱形图时,默认会新增一个显示在图表上方的Y轴2,沿用这个默认设置,如下图所示:

    2020-04-10_23-55-53.png

    2)如下图步骤设置,让Y轴对应系列2的值,让Y轴2对应系列1的值,不设置堆积效果。

    QQ图片20200411000810.png

    3.2 效果预览

    1)PC 端

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

    2020-04-14_16-58-27.png

    2)移动端

    1586536422677911.png

    4. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\BasicChart\柱形图.frm

    点击下载模板:柱形图.frm

    附件列表


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