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

目录:

1. 概述编辑

1.1 版本

报表服务器版本
11.0

1.2 应用场景

饼图是以扇形区域大小表示每一个数值相对于总数值的占比,

饼图适用于显示一个数据系列中各项的大小与各项总和的比例。(数据系列:在图表中绘制的相关数据点,这些数据源自数据表的行或列。图表中的每个数据系列具有唯一的颜色或图案并且在图表的图例中表示。)

Snag_2a5a83f5.png


1.3 图表特点

优点:能很直观的看到每一个部分在整体中所占的比例。

缺点:不适合较大的数据集(分类)展现,数据项中不能有负值,当比例接近时,人眼很难准确判别。

2. 示例编辑

2.1 准备数据

点击设计器左上角「文件>新建普通报表」,新建 内置数据集 ,如下图所示:

Snag_2a638409.png

2.2 插入图表

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

Snag_2a65394b.png

2.3 设计饼图

选中图表,点击右侧属性面板「单元格元素」,可设置图表的各个属性:类型、数据样式特效

2.3.1 图表类型

选中图表所在单元格,点击右侧「单元格元素>类型」可查看和选择图表类型。

Snag_2a68ab40.png

2.3.2 绑定数据

选择「数据」,绑定图表数据如下图所示:

Snag_2a69c6f1.png

2.3.3 设置样式

1)选择「样式>标题」,输入文本「Web服务器市场占比」,其余设置保持默认。

Snag_2a6b8d88.png

2)选择「样式>图例」,取消勾选图例可见。

Snag_2a6d4460.png

3)饼图可设置「值标签」和「分类标签」,本例中饼图分类为「无」,故只需要设置「值标签」。

选择「样式>标签」,勾选使用标签,值标签选择「富文本」,关于富文本的具体介绍请参见:富文本自定义标签或提示 。设置标签的显示位置为「饼图外」,并选中「牵引线」。

步骤如下图所示:

Snag_2a7116a5.png

4)选择「样式>系列」,设置饼图的配色方案,边框线型选择「无」。如下图所示:

Snag_2a8a5de6.png

2.4 效果预览

2.4.1 PC 端

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

2.4.2 移动端

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

Snag_2a91db90.png

3. 变形饼图编辑

饼图常见的变形有两种:半圆饼图、圆环饼图。这里简单介绍其设置方式和效果。

3.1 半圆饼图

通过设置「样式>系列」的起始角度和终结角度,可改变饼图的形状。半圆饼图的起始角度为 270,终结角度为 90 。

Snag_2a9b6bfc.png

预览效果如下图所示:

Snag_2a9f1609.png

3.2 圆环饼图

通过设置「样式>系列」的内径占比,可使饼图中部镂空。

Snag_2aa3b090.png

例如将内径占比设置为 80%,预览效果如下图所示:

Snag_2aa6ae8e.png

4. 模板下载编辑

已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\PieChart\基础饼图.cpt

点击下载模板:基础饼图.cpt