饼图中心显示标签

  • 文档创建者:Leo.Tsai
  • 编辑次数:5次
  • 最近更新:Leo.Tsai 于 2021-04-08
  • 1. 概述

    1.1 版本说明

    报表服务器版本JAR 包版本
    10.0.132021-01-25

    1.2 应用场景

    环形饼图 有个常见的需求,希望可以将分类名、汇总值或自定义文本这样的信息展示在中间空白区域,提高图表的空间利用率。

    饼图的标签功能,支持将自定义的文字、分类名、汇总值这样的信息显示在饼图中间区域。

    1.png

    1.3 功能入口

    10.0.13 版本将饼图标签进行了拆分,分类标签单独拆成一个设置项。该标签内容支持显示在上中下 3 个位置,跟通用标签一样,支持 3 种方法设置标签内容。

    • 通用:支持勾选分类名和汇总值,显示内置的数据指标。

    • 富文本:支持自定义文本内容。

    • 自定义:支持通过代码自定义文本内容。

    1614242011793191.png

    2. 示例

    2.1 准备数据

    新建普通报表,新建内置数据集,如下图所示:

    Snag_580d4e47.png

    2.2 插入图表

    合并一片区域单元格,插入饼图,如下图所示:

    1610441757143392.png

    2.3 绑定数据

    绑定饼图数据,如下图所示:

    1616382192341652.png

    2.4 设置样式

    饼图去掉标题,图例设置在上方,内径占比调整为80,实现环形效果,如下图所示:

            1614242439178025.png

    2.5 自定义中间标签

    饼图标签取消显示值标签,分类标签使用富文本自定义,并将分类标签的位置设置为居中,也就是显示在饼图中间,如下图所示:

    1614242905722775.png

    点击「富文本编辑」进入编辑器界面,在编辑面板中输入「安卓各版本市占率」,字体样式设置为「自定义」。如下图所示:

    1614243100368276.png

    2.6 效果预览

    2.6.1 PC 端

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

    1.png

    2.6.2 移动端

    同时支持 App 端和 H5 端,效果如下图所示:

    1610442710308363.jpg

    3. 模板下载

    已完成模板参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\PieChart\饼图中心显示标签.cpt

    点击下载模板:饼图中心显示标签.cpt

    附件列表


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

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:186-0252-2339