历史版本15 :条形图 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 应用场景

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

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

PC效果.png

1.2 图表特点

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

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

2. 属性介绍编辑

2.1 类型

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

2.1.1 条形图

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

Snag_f73c118.png

2.1.2 堆积条形图

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

Snag_f845d5a.png

2.1.3 百分比堆积条形图

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

Snag_f855d94.png

2.1.4 自定义条形图

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

Snag_f8f983b.png

2.2 数据

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

2.3 样式

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

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

1)渐变配色

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

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

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

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

Snag_2e9d9bb9.png

2)坐标轴自定义

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

Snag_19ef7e05.png

3)堆积自定义

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

Snag_2e9aa898.png

2.4 特效

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

3. 示例编辑

3.1 报表设计

3.1.1 数据准备

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

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

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

order by 类别名称

1586413981781773.png

3.1.2 插入图表

先合并一片单元格区域,选中单元格后点击上方工具栏插入图表按钮,插入一个条形图。如下图所示:

插入图表.png

3.1.3 数据绑定

选中图表,点击右侧属性面板「单元格元素>数据」,绑定数据集数据,数据集选择 ds1,分类选择「类别名称」,系列名使用字段名,字段名和系列名选择「库存量」,汇总方式选择「求和」,再加一个字段名和系列名选择「订购量」,汇总方式选择「求和」。如下图所示:

数据绑定.png

3.1.4 样式设计

选中图表,选择「单元格元素>样式>标题」,输入文本「条形图」,其余设置默认。如下图所示:

样式1.png

3.2 效果预览

3.2.1 PC 端

保存报表,点击「分页预览」,效果如 1.1 节所示。

3.2.2 移动端

支持 App 端和 HTML5 端,效果如下图所示:

移动4.jpg

4. 模板下载编辑

点击下载模板:条形图.cpt