产品文档

京东莫奈可视化平台

2023-12-20 11:38:16

堆叠条形图

适用场景:堆叠条形图可以用来直观说明同一组或同一类在不同的划分标准下的表现情况。

样式设置

20200915133722.png

堆叠条形图的样式设置包括:数据系列,水平轴设置,垂直轴设置,辅助线设置,提示框设置,图例设置,数据滚动设置,动画设置,图表位置和图表尺寸。

数据系列

20200818150004.png

数据系列设置可以设置柱子宽度,圆角值以及柱子的背景颜色。柱子宽度支持自适应粗细和自定义粗细两种。

1595304037(1).png

每个数据系列里包括形状设置和文本设置。可以设置颜色以及文本内容。

水平轴设置

1593570763(1).png

点击隐藏轴开关,可以在大屏中隐藏水平轴

文本设置:

字体,支持微软雅黑、宋体、黑体、隶书、幼圆、楷体和系统默认字体;

字号:X轴的字号,可输入字号调整;

字体粗细:X轴字体的粗细,有正常、细体、粗体、更粗四个选项;

字体颜色:X轴字体的颜色,分为主题色,标准色,最近使用的颜色,以及更多颜色的选项,如果需要更快的选取页面中已有的颜色可以通过使用取色器功能,不需要取色时可以通过Esc键或点击取色器取消。

624a1f746027be067a5e793e355d75ed_src.png

旋转角度:X轴文字的旋转角度,可输入旋转角度进行调整;

智能隐藏:智能隐藏可将X轴过多的刻度文字进行隐藏,如需全部显示X轴刻度信息,则无需勾选,默认不勾选。

1593571213(1).png

轴线设置:可以设置坐标轴的粗细,样式和颜色。样式中包括三种样式。

垂直轴设置

1593571543(1).png

点击隐藏轴开关,可以在大屏中隐藏水平轴

文本设置:

字体,支持微软雅黑、宋体、黑体、隶书、幼圆、楷体和系统默认字体;

字号:X轴的字号,可输入字号调整;

字体粗细:X轴字体的粗细,有正常、细体、粗体、更粗四个选项;

字体颜色:X轴字体的颜色,分为主题色,标准色,最近使用的颜色,以及更多颜色的选项,如果需要更快的选取页面中已有的颜色可以通过使用取色器功能,不需要取色时可以通过Esc键或点击取色器取消。

624a1f746027be067a5e793e355d75ed_src.png

旋转角度:X轴文字的旋转角度,可输入旋转角度进行调整;

智能隐藏:智能隐藏可将X轴过多的刻度文字进行隐藏,如需全部显示X轴刻度信息,则无需勾选,默认不勾选。

1593571213(1).png

轴线设置

可以设置坐标轴的粗细,样式和颜色。样式中包括三种样式。

辅助线设置

分为横向辅助线和纵向辅助线和标记线设置。可以选择辅助线是否显示,以及对辅助线粗细样式、颜色进行设置。

粗细:可以手动输入数字或者选择有粗细框右边的上下标一点点调节。

样式:支持三种形式,如下所示:

20200519162818.png

1593572003(1).png

标记线设置中,还可以额外对标记线的标记值,文本进行设置。

提示框设置

1595301426(1).png

适用情况:在预览界面时,鼠标滑过柱状区域,可以显示相应的信息。

可以对提示框的字体,字号,文字粗细以及文字颜色和背景颜色进行设置,如图所示

除此之外,还可以对提示框的边框颜色,粗细以及选中颜色进行设置。

图例设置

图例设置可以对是否显示图例,以及所显示图例的文本和布局进行设置。

文本:支持字体,字号,字体颜色以及字体粗细的修改。

布局:可以对图例的位置进行设置。

目前默认支持:顶部,底部,左侧,右侧的居左居中居右的设置,如下图所示:

支持自行设置图例位置:通过调整左右间距,和上下间距进行自主设置。

20200519163053.png

20200519163110.png

数据滚动设置

1593572373(1).png

点击开启数据滚动,可以打开数据滚动设置。

通过设置数据滚动起点和重点,可以在图表中优先展示这部分数据,再通过滚动数据条的滚动,显示其他数据

在滚动条样式设置中,对滚动条宽度,填充颜色和边框颜色进行设置。

动画设置
1593572600(1).png

在动画设置中,可以设置图表在提示框轮播时的自动动画轮播。包括动画的开关和间隔时间设置。

数据系列

数据系列设置中,可以添加删除各个数据系列,并设置系列名和系列值。

在形状设置中,可以改变每一个数据系列尺寸大小,圆角设置以及颜色设置

1593572964(1).png

文本设置中可以设置图表中每个数据系列中的显示数据文本。

图表位置

图表位置为图表左上角的位置坐标,通过横坐标和总左边的设置即可设置对应的图表位置。也可以通过选中图形后用鼠标拖曳到相应位置的方式设置图表位置。

20200519163440.png

图表尺寸

即显示的柱状图的宽和高,通过设置相应的数字,调节柱状图的大小。

20200519163556.png

数据设置

数据字段

20200915133804.png

堆叠条形图的数据字段包括:X,Y,S

X:堆叠条形图中数据在X轴上的值,需要将数据与图表进行映射;

Y:堆叠条形图中数据在Y轴上的值,需要将数据与图表进行映射;

S:堆叠条形图中的数据系列字段,需要将数据与图表进行映射;

数据源类型

支持静态数据,API和数据库三种类型。操作流程图整体如下所示:

20200519164336.png

静态数据:

1597659394(1).png

在下方表格中可输入或复制粘贴所需要的数据。其中,每一列数据对应一个数据字段,第一行为该列数据字段名,需要在上方进行映射设置。

目前,数据接入表格支持复制、粘贴、修改、删除数据。选中需要进行改动的数据后,可以点击右键进行操作,也可以使用ctrl+c等快捷键进行操作。当点击列序号或行序号是,会对该列或行全部选中,点击末尾的红色按钮可对该行或列进行删除操作,也可以点击右键对该行或列进行其他操作。

当点击红框内的放大按钮时,会出现如下图所示的输入窗口,方便用户进行操作。

55.png

在窗口中设置数据后,点击完成即可

点击下方的高级输入,可以切换到输入json格式数据模式。json数据样例如下。

[{"age":25,"number":37,"s":1},{"age":26,"number":41,"s":1},{"age":27,"number":55,"s":1},{"age":28,"number":49,"s":1},{"age":25,"number":21,"s":2},{"age":26,"number":32,"s":2},{"age":27,"number":25,"s":2},{"age":28,"number":29,"s":2}]

API

在下方输入框中输入相应的网址即可,如下图所示:

20200519164415.png

数据库

选取相应的数据库类型后,选择对应数据库中的数据源名称。之后在下方输入框中输入简单的SQL语句即可实现数据的导入,之后查询数据响应结果,无误后确认设置即可。

20200519164444.png

交互

image.png

组件交互是指在大屏可视化中,通过组件之间的相互作用和响应,实现用户与大屏可视化之间的互动。同时,组件交互可以帮助用户更加直观地理解和操作大屏,提高用户体验。具体操作参考组件交互配置章节。

文档反馈

开始与售前顾问沟通

可直接拨打电话 400-098-8505转1

我们的产品专家为您找到最合适的产品/解决⽅案

在线咨询 5*8⼩时

1v1线上咨询获取售前专业咨询

点击咨询
企微服务助手

专业产品顾问,随时随地沟通