图表插入方式

1.1 版本

1.2 应用场景 

在 FineReport 中常用图表展示数据，而插入图表的方式主要分为两种：单元格元素图表、悬浮元素图表。

「单元格元素图表」可通过单元格的父子格关系，跟随父格的扩展生成多个图表；而「悬浮元素图表」最大的优点在于，图表可以随意拖放到任何位置，不受单元格限制。

本文将对这两种图表各自的特点进行简单介绍。

1.3 功能入口

插入图表的功能入口有很多：

• 普通报表菜单栏点击「插入」，单元格元素或悬浮元素中都可插入图表。

• 属性面板选择「单元格元素」或「悬浮元素」，再选择插入图表。

• 普通报表上方工具栏点击  图标，即可在单元格中插入图表。

• 决策报表 body 中，直接将图表拖入画布即可。

注：决策报表中没有悬浮元素，且悬浮元素不支持移动端。

当图表数据使用 单元格数据源 时，可根据父格数据生成相应的图表，而不需要对每组数据分别制作图表。预期效果如下图所示：图中图表跟随 A2 单元格扩展。

注：具体示例可参考文档 图表入门示例 。

2.1 插入方法

2.1.1 菜单栏

设计器菜单栏点击「插入>单元格元素>插入图表」，如下图所示：

2.1.2 属性面板

选中单元格后，右侧属性面板点击「单元格元素>插入元素>插入图表」，如下图所示：

2.1.3 工具栏

普通报表上方工具栏点击  图标，即可在单元格中插入图表。如下图所示：

「悬浮元素图表」最大的特点和优势在于，图表可以随意拖放到任何位置，不跟随单元格扩展，且可以自由调整图表区域的大小。

悬浮元素图表一般用于非固定格式和对图表自由度要求较高的设计场景，效果如下图所示：

3.1 插入方法

3.1.1 菜单栏

设计器菜单栏点击「插入>悬浮元素>插入图表」，如下图所示：

3.1.2 属性面板

选中单元格后，右侧属性面板点击「悬浮元素>添加元素>插入图表」，如下图所示：

3.2 单元格扩展对悬浮元素图表的影响

单元格扩展对悬浮元素图表的位置是有影响的，下面将针对 2 种扩展方向分别介绍。

3.2.1 横向扩展

1）单元格横向扩展时，如果悬浮元素跟扩展单元格所在列没有交叉的地方，那么悬浮元素的位置受单元格扩展影响，进而被推开，如下图所示：

设计器中位置：

前端效果展示：

2）单元格横向扩展时，如果悬浮元素跟扩展单元格所在列有交叉的地方，那么悬浮元素的位置不会受单元格扩展影响，如下图所示：

设计器中的位置：

前端效果展示

3.2.2 纵向扩展

1）单元格纵向扩展时，如果悬浮元素跟扩展单元格所在行没有交叉的地方，那么悬浮元素的位置受单元格扩展影响，进而被推开，如下图所示：

设计器中的位置：

前端效果展示：

2）单元格纵向扩展时，如果悬浮元素跟扩展单元格所在行有交叉的地方，那么悬浮元素的位置不会受单元格扩展影响，如下图所示：

设计器中的位置：

前端效果展示：

注：除图表外其他悬浮元素类型受单元格扩展的影响同上。