图表组件样式

  • 文档创建者:doreen0813
  • 编辑次数:27次
  • 最近更新:April陶 于 2020-11-20
  • 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

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

    附件列表


    主题: 制作可视化组件
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!