历史版本25 :图形组件样式 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 应用场景

用户可以通过调整图形组件的组件样式,对组件进行一些美化,改变组件的风格。

1.2 功能简介

图形组件可标题、图例、轴线、横向网格图、纵向网格图、背景、自适应显示、交互属性设置样式,如下图所示:

5.png

2. 标题编辑

6.png

图形组件标题的设置方式与表格组件一致,详细请参见:标题

3. 图例编辑

展开图例,用户可对图例的字体、边框、和位置进行自定义。

7.png

3.1 字体

用户可以选择系统自动的字体设置,也可以对字体的大小,粗细等进行自定义。

8.png

3.2 边框

边框默认情况下为「透明」,用户可以设置图例边框的颜色,如下图所示:

3.gif

3.3 位置

用户可以自定义图例显示的位置,点击上、下、左、右,如下图所示:

4.gif

3.4 图例顺序

图例的顺序与字段的排序一致,例如想要将本示例中的图例顺序进行调整,就可以对字段「是否已经交货」进行排序。点击下拉>降序>合同金额,用户可以根据自己的排序需求进行排序。排序后图例顺序跟着改变,如下图所示:

15.gif

4. 轴线编辑

轴线指的是分区线及坐标轴线,点击隐藏,效果如下图所示:

5.gif

用户也可以选择轴线的线型(虚线或实线)、线宽、和线的颜色,如下图所示:调整轴线为虚线,线宽为 2px,颜色为红色。6.gif

5. 横向网格线编辑

网格线是帮助用户易于查看数据的辅助线条,是坐标轴上刻度线的延伸。当纵轴是指标时,图表可以设置横向网格线。

同「轴线」设置,横向网格线可以设置是否显示、线型、线宽和颜色,如下图所示:

7.gif

6. 纵向网格线编辑

纵向网格线与横轴网格线类似,只有当图表的横轴为指标字段时,纵轴网格线才会出现。纵向网格线也可对线型、线宽、颜色进行设置,设置方法同横向网格线。如下图所示:

8.gif

7. 背景编辑

用户可以对组件背景进行替换,用户可以选择颜色(可选择透明)或上传组件的背景图片。如下图所示:

注:上传的背景图片的大小和像素没有要求。

2020-11-06_16-57-23.gif

若组件为地图组件,则除了可以设置颜色和上传背景外,还可以选择是否进行 GIS 背景设置(可选择的内置 GIS 背景有 9 种),如下图所示:

10.gif

8. 自适应显示编辑

自适应显示为设置组件中图表自适应方式的地方,包含四种自适应方式:标准适应、整体适应、宽度适应和高度适应,默认为标准适应。

  • 标准适应:FineBI 按照视觉最佳比例设置的默认效果。

  • 整体适应:图表的所有区域在预览图中全部展示,横向和纵向都没有滚动条。

  • 宽度适应:图表的宽度方向(即横向)在图表预览区域全部展示,纵向采取最佳比例,因此纵向可能出现滚动条。

  • 高度适应:图表的高度方向(即纵向)在图表预览区域全部展示,横向采取最佳比例,因此横向可能出现滚动条。

例如,我们将下图的自适应效果调整为宽度适应,效果如下图所示:

14.gif

9. 交互属性编辑

交互属性可以设置组件联动、跳转是否传递明细过滤条件。

10.png

图形组件的交互属性与表格一致,详细请参见:交互属性