饼图

  • Last update:September 17, 2021
  • 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

    Attachment List


    Theme: 图表应用
    Already the First
    • Helpful
    • Not helpful
    • Only read

    滑鼠選中內容,快速回饋問題

    滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

    不再提示

    9s后關閉

    Get
    Help
    Online Support
    Professional technical support is provided to quickly help you solve problems.
    Online support is available from 9:00-12:00 and 13:30-17:30 on weekdays.
    Page Feedback
    You can provide suggestions and feedback for the current web page.
    Pre-Sales Consultation
    Business Consultation
    Business: international@fanruan.com
    Support: support@fanruan.com
    Page Feedback
    *Problem Type
    Cannot be empty
    Problem Description
    0/1000
    Cannot be empty

    Submitted successfully

    Network busy