万花筒图表

  • 文档创建者:athlonk7
  • 编辑次数:4次
  • 最近更新:Leo.Tsai 于 2020-01-16
  • 1. 概述

    1.1 应用场景

    FineReport 丰富的图表功能可以实现各式各样的可视化展示效果,但面对一些复杂的、需要设计工具或编程语言实现的高级图形,也可以借助图表间的组合,实现出类似的效果。

    本文将通过图表组合实现如下图所示的万花筒图表。

    Snag_e84699c.png

    1.2 功能介绍

    • 外圈展示系列名称,鼠标拖拽可旋转外圈。

    • 内圈展示系列值,鼠标悬浮可查看系列名和系列值。

    1.3 实现思路

    • 外圈使用饼图实现,以单元格元素的方式插入,通过修改内径实现圆环效果。

    • 内圈使用雷达图实现,以悬浮元素的方式插入,将其放置在圆环内实现内圈效果。

    2. 示例

    示例通过万花筒图表统计明星的票房号召力。

    2.1 数据准备

    将 帆软周历.xls 放到%FR_HOME%\webapps\webroot\WEB-INF\reportlets\目录下,新建普通报表,新建 Excel 类型的文件数据集 File1,选择 Excel 文件所在路径,点击确定

    Snag_e91c4bd.png

    2.2 报表设计

    2.2.1 外圈设计

    1)合并一片单元格,插入饼图。

    Snag_e979b10.png

    2)如下图绑定饼图数据。

    Snag_e9d4012.png

    3)饼图样式选择标题,不勾选标题可见

    Snag_ea287f0.png

    4)饼图样式选择图例,不勾选图例可见

    Snag_ea4146c.png

    5)饼图样式选择标签,勾选使用标签,文本勾选系列名

    Snag_ea778c5.png

    6)饼图样式选择系列,修改内径占比为80,开启可旋转功能

    Snag_e9e4a2f.png

    7)饼图样式选择提示,勾选使用数据点提示,文本勾选系列名

    Snag_ead18f4.png

    2.2.2 内圈设计

    1)菜单栏选择插入>悬浮元素>插入图表,插入堆积柱形雷达图

    Snag_f467814.png

    2)鼠标右键雷达图,点击样式,选择背景>颜色,设置雷达图背景色为透明

    Snag_f493d9c.png

    3)如下图绑定雷达图数据信息。

    Snag_f4a6505.png

    4)雷达图样式选择标题,不勾选标题可见

    Snag_f4ac98c.png

    5)雷达图样式选择图例,不勾选图例可见

    Snag_f4ba4d8.png

    6)雷达图样式选择坐标轴>极角轴隐藏轴标签。

    Snag_f4c12e4.png

    7)雷达图样式选择坐标轴>极径轴隐藏轴标签,值定义采用统一计算,勾选自定义主刻度单位,设置值为1

    Snag_f4cd72e.png

    8)雷达图样式选择提示,勾选使用数据点提示,文本勾选系列名

    Snag_f4e2384.png

    9)雷达图特效选择交互属性,工具栏的内容全部不勾选,隐藏工具栏。

    Snag_f4fb213.png

    10)右键雷达图,点击置于顶层,鼠标将雷达图拖动到外圈的环内。

    Snag_f51b527.png

    2.3 效果预览

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

    注:由于存在悬浮图表,不支持移动端和决策报表。

    296D60B3-ACF5-485C-8FD5-43829A696DAD.GIF

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\Chart\明星票房.cpt

    点击下载模板:明星票房.cpt

    点击下载文件数据集用到的 Excel 文件:帆软周历.xls

    4. 注意事项

    4.1 外圈部分提示不悬浮

    由于雷达图为方形建模且范围较大,故悬浮在外圈的环内时,会遮盖掉部分饼图的提示操作。

    8CF05FC0-ECA8-4611-B719-6D21E14404E5.GIF


    4.2 内外圈柱形不对齐

    由于雷达图和饼图的柱形不匹配,故报表预览时会出现柱形不对齐的情况,可以手动旋转下外圈,对齐内圈柱形。

    DCA2D776-7947-435F-98C0-38A3B988629B.GIF

    附件列表


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