可选配置是指,可以通过页面右下角的“添加组件配置项”添加的配置项
添加组件配置项
点击设置页面右下角的“添加组件配置项”,唤起组件配置项的列表窗口,通过选择自己需要的配置项,点击“添加设置”按钮,即可在页面的右边进行配置。
注意:不支持在配置项列表窗口配置
面板
面板设置包括标题设置、面板样式设置、背景设置、布局是用来设置组件背后的矩形面板。
标题设置
一般在面板的左上角会展示组件的标题,可以在标题设置中设置标题的字号、颜色以及装饰图标。
- 显示标题:可以设置标题是否显示
- 标题:显示标题后,标题默认按组件名称,也可以给组件自定义标题
- 标题文字:设置标题的字体大小、是否加粗、颜色
- 装饰图标:在标题的左边增加一个装饰性的图标
- 标题图标:在标题的左侧或右侧增加说明性的图标,当鼠标移入图标时,可以展示提供的提示语(添加了装饰图标时,标题图标只能在标题右侧)
面板样式设置
设置组件背后的矩形面板样式,可以设置边框、阴影、圆角等参数。该设置项依赖于面板设置的“显示面板”属性。
- 显示面板:关联设置的相关样式,若关闭,设置的面板相关样式不显示
- 圆角:设置矩形面板圆角的大小
- 边框:设置矩形面板边框的粗细和颜色
- 阴影:设置矩形面板阴影的颜色、模糊距离的大小,以及在x、y轴的偏移范围
背景设置
可以设置面板的背景颜色或上传背景图片。背景设置同样依赖于面板设置的“显示面板”属性。
- 背景颜色:可以自定义组件的背景颜色
- 背景图片:可以上传图片作为组件的背景,图片默认按宽度适应
- 背景重复:可以选择背景图片的重复方式,包括不重复、水平重复、竖直重复、无限重复
- 缩放方式:可以选择背景图片的缩放方式,包括按宽度缩放、按高度缩放、原始尺寸、铺满页面
布局
- 边距设置:在不同的主题中,都有定义边距参数,但你仍然可以在边距设置里设置组件的边距,单位是像素。
注意
方舟内置的“主题样式”中已经包含了设计师设置好的样式参数,除非对面板有特别的想法,否则无需对面板样式以及背景进行单独设置。因为一旦单独设置了面板样式以及背景,这些设置将会覆盖“主题样式” 。
坐标轴
坐标轴设置
设置组件的坐标轴属性与样式,可以分别设置“维度轴”与“指标轴”,包括轴线、轴标、指标数值等。适用于有坐标轴的组件。
注意:对于不同的图表,“维度轴”与“指标轴”也不同,例如柱状图的X轴是维度轴、Y轴是指标轴,条形图则与之相反。
坐标轴设置分为X轴和Y轴,X轴和Y轴同样包括以下配置项:
- 显示轴开关:控制坐标轴是否显示,显示之后,我们可以通过以下配置项对相应的坐标轴样式进行设置
- 分割线开关:控制分割线是否显示,显示后可以设置分割线样式(指标轴默认显示分割线)
- 轴标自适应:开启时可以在轴标字数过长、出现重叠的情况下,有规律地隐藏部分轴标,使图表更加简洁美观
- 轴标旋转:调整轴标的显示角度
- 轴标最多字符数:可以限制轴标显示的字符数,超过部分显示为“...”
- 坐标轴名称:可以为坐标轴命名,并设置其显示在头部或边缘
- 轴标文字:可以设置轴标文字的字号、是否加粗以及颜色
不同的是,针对指标轴有独有的配置项:
- 数据类型:设置指标轴的数据显示格式,包括默认、数值、百分比,“数值“格式下可以设置小数位数;”默认”、”数值”格式下可以设置轴标单位,包括自动、无、K、M、B
- 前、后缀:可为指标轴自定义前、后缀
- 千分位:设置是否在千分位后面显示“,”
- 边界值:可以设置其自动,也可以自定义最小值、最大值、间隔,同时分割线也会随之改变
在柱状图与条形图的“图形设置”中设置”显示数值”后,数值的格式会跟随指标轴设置的小数位数、前后缀、千分位的显示。
轴标
适用组件:雷达图
- 分割线颜色
- 轴标文字:可以设置轴标文字的字号、是否加粗以及颜色
图例
设置图例(legend),适用于有图例的的图表组件。
图例样式
设置图表的图例,包括图例的颜色序列和图例的形状、位置。
- 显示图例:设置是否显示图例
- 图例颜色:显示图例后,可以调整图例色盘,对于多图例图表,图例的颜色序列会按照图表的列维度依次绑定,如果维度数超过颜色序列的长度,则会从序列头部开始循环绑定。
- 图例形状:设置图例形状,包括圆形和方形
- 图例位置:设置图例显示的位置,包括底部居中、顶部靠左、顶部靠右、顶部居中、右侧居上、右侧居中、左侧居中
图例数值
在图例中附加显示一些数值
适用组件:柱状图和条形图、折线图、饼环图
不适用组件:雷达图、基础气泡图
- 图例中显示总值:自动计算图例对应的维度的指标加总
- 图例中显示占比:图例对应维度指标在全部维度中的占比
表格视图
设置图表的表格视图,适用于可以用表格来展示数据的图。
表格基础设置
开启表格视图开关之后,你可以给图表添加一种表格视图,使用户可以通过行列表格来观察图表背后的数据集,并设置数据集是否允许导出、一键复制等。
- 表格视图:默认为关闭,开启后图标可以切换为表格,并且我们可以设置表格的样式以及功能拓展(以下配置项依赖表格视图的开启)
- 固定表头:开启后表头于表格中 固定
- 序号列:设置是否显示序列号,开启后在每一列数据前增加序号
- 序号列标题:可为序号列自定义标题,默认为“序号”
- ⾃动合并单元格:设置是否对同一维度下相邻的相同数据单元格进行合并
- 自适应宽度:表格适应数据宽度
- 导出csv⽂件按钮:设置是否支持导出csv文件
- 自定义导出列:开启该配置项,支持选择导出的数据列,并依赖于“导出csv⽂件”配置项
- 复制数据按钮:设置是否支持复制数据
- 展示占比:新增对应数据列显示数据在所在列的占比
分页设置
设置表格是否分页显示数据,以及每页的数据行数和分页交互方式,依赖于表格视图的开启。
- 不使用分页:默认为关闭,即使用分页,数据会按设置的每页列数进行分页
- 分页方法:支持页码选择器和滚动加载
- 每页条数:自定义每页显示数据条数
表格整体样式
设置表格的整体样式,以及数据的对齐方式,依赖于表格视图的开启。
注意,“对齐方式”中的“常规对齐”指的是文本类数据左对齐显示,数值和日期累数据右对齐显示。
- 表格布局:包括“常规型“和“紧凑型“两种布局方式
- 对齐方式:包括常规对齐、居中对齐、左对齐、右对齐
表头样式
设置表格视图的表头部分,包括背景、行高和字体,依赖于表格视图的开启。
注意:方舟内置的“主题样式”中包含了设计师设置好的样式参数,非必要无需对背景颜色进行单独设置
- 背景颜色:支持自定义表头背景颜色
- 表头字体:可以设置表头的字体大小、是否加粗、颜色
- 表头行高:支持自定义表头行高
表体样式
设置表格视图的表体部分,包括背景色(可设置条纹色)、鼠标悬浮色、行高和字体,依赖于表格视图的开启。
注意:方舟内置的“主题样式”中包含了设计师设置好的样式参数,非必要无需对条纹颜色、非条纹颜色进行单独设置
- 条纹颜色:即数据列的偶数列,支持自定义颜色
- 非条纹颜色:即数据列的奇数列,支持自定义颜色
- ⿏标悬浮⾊:支持自定义鼠标悬浮色,当鼠标移动到数据列时,对应的数据列会呈现出设置的鼠标悬浮色
- 表格内容字体:设置表格内容字体的大小、是否加粗、颜色
- 表体行高:支持自定义表体行高
多数据集
多数据集
当图表组件对接了多个数据集的时候,可以通过“多数据集设置”使多个数据集在同一个图表中展示。用户可以通过图表右上角的按钮或下拉列表在多个数据集之间切换。
- 展示多数据集:默认为关闭,开启时自持展示多数据集,并在组件的右上角显示切换按钮
- 展示方式:支持多tab切换和下拉列表两种数据集切换方式
- 字符数限制:对多sheets的标题进行字符数限制,超过的内容会显示为“...”
操作栏样式
设置多数据集切换的交互与样式。
比例计算设置
比例计算方式
在表格视图、悬浮框中开启显示占比时,其比例比计算方式的设置。
数据加载与渲染
数据加载与渲染
配置图表加载数据以及自动更新数据的时机。其中,如果图表开启了“页面初始化时不加载”,则图表对数据的请求仅会发生在联动交互或自动请求时。
- 页面初始化时不加载:默认关闭,即页初始化时加载
- 自动请求更新:默认关闭,开启时可以自动请求更新
- 自动请求更新时间 (s):当开启自动请求更新时,可以设置自动请求更新的时间间隔。
联动交互样式
联动交互样式
设置组件联动时的相关交互与样式。
- 开启回显高亮:默认开启,当事件组件向别的组件发起联动,或有协同联动现象产生时,事件组件中对应的维度会高亮显示
- 显示取消联动按钮:当事件组件向别的组件发起联动,或有协同联动现象产生时,我们可以在事件组件设置显示“取消联动“按钮,点击之后事件组件会回到设定的“取消联动行为”状态
- 取消联动行为:这里可以设置组件“取消联动”之后的,联动的筛选参数重置为“不限”或者“还原初始值”
多语言设置
多语言设置
设置图表是否启用多语言。启用多语言之后,当用户切换了应用语言时,组件会从语言包中寻找对应的翻译,来替换掉标题、轴标、提示语等文本内容。
注意:需要应用开启多语言支持之后,对组件的多语言设置才会生效。且实际的翻译效果取决于语言包中对所选择语言的词句覆盖情况。
*注意,用于表格组件的多语言设置有些不同
- 启⽤多语⾔:默认为关闭
- 翻译数据:启用多语言之后,可以选择是否翻译数据
权限控制
组件权限设置
定义是否将当前组件注册为一个权限点,以及权限点的名称、生效方式。
一般情况下,没有被授予该权限点的用户将无法看到这个组件,但是在开启了“权限反选”之后,被授予了该权限点的用户无法看到这个组件。
- 组件权限点:默认为开闭,开启后可以为权限点命名
- 权限点名称:命名权限点
- 权限反选:开启后,在用户中心被授予该权限点的用户将不可访问该组件
数据集权限设置
当组件对接了多个数据集时,定义是否将各数据集分别注册为权限点,以及权限点的名称、生效方式。
用数据集权限设置可以控制用户对一个图表中不同的数据集的访问权限。
- 数据集权限点:当组件对接了多个数据集时,定义是否将各数据集分别注册为权限点,以及权限点的名称、生效方式。默认为关闭,开启后可以进行数据集权限设置
- 数据集权限设置:控制用户对一个图表中不同的数据集的访问权限