路径图是一种表示变量间因果关系的线路图,经常被用来表示用户路径或者被使用在地图上用于展示某种图形。由线性结构方程模型可画出对应的路径图,由路径图也可写出对应的线性结构方程模型。同时路径图也是一种路径分析术语。
在样式中可以设置堆叠条形图组件的位置、颜色、坐标轴、提示信息和动画等。
接下来,会用以下示例数据对组件样式进行说明:
x | y | 时间 |
---|---|---|
0.65 | 1 | 1965 |
0.65 | 1.05 | 1966 |
0.64 | 1.1 | 1967 |
0.63 | 1.12 | 1968 |
0.55 | 1.15 | 1969 |
0.57 | 1.19 | 1970 |
0.58 | 1.14 | 1971 |
0.59 | 1 | 1972 |
0.57 | 0.96 | 1973 |
配置项 | 说明 | |
---|---|---|
不透明度 | 1)根据个人喜好或整体和谐度合理地使用透明度,会让大屏布局更美观; | 2)这个设置项的一个常见用法是结合条件样式/交互/多状态来实现组件的显示和隐藏。 |
指示组件的填充颜色。给组件的 Y 轴字段配置数据后,可以对这些字段单独进行颜色设置。
路径图 示例数据颜色,如下图所示:
路径图 更换数据颜色,如下图所示:
配置项 | 说明 |
---|---|
轴线 | X 轴的线条类型、颜色及粗细的配置。 |
轴刻度线 | X 轴的刻度线颜色、粗细及长度的配置。 |
轴刻度值 | X 轴的轴标签位置、距轴线的位置、字体设置、外发光展示设置及旋转角度的配置。 |
配置项 | 说明 |
---|---|
轴线 | Y 轴的线条类型、颜色及粗细的配置。 |
轴刻度线 | Y 轴的刻度线颜色、粗细及长度的配置。 |
轴刻度值 | Y 轴的轴标签显示格式、计数单位、小数设置、刻度值范围和颜色、大小,字体设置和外发光显示设置,其中轴刻度值支持系统自适应,也支持自定义值范围。 |
路径图 Y 轴样式,如下图所示:
【温馨提示】要注意Y 轴的轴刻度值设置,轴刻度值显示格式有两种:数值和百分比,注意选择和数据相对应的格式。轴刻度值设置有两种:自适应和自定义,在自定义的时候要注意最小、最大刻度值的设置,必须比数据的值大。
网格线易于查看和计算数据,在这里可以对组件的 X 轴、Y 轴的网格线进行设置,包括线条类型和粗细、线条颜色和粗细等内容。
路径图 网格线样式,如下图所示:
辅助线是一种参考线、分界线,设置辅助线的位置可以对数据分布形态进行分割和归纳,使得数据分布形态及趋势更加明显。当线条类型为虚线时,可以设置 Y 轴的虚线粗细。
例如,将辅助线线条位置设置为1,此时组件上会出现一条供参考的分界线,帮助我们查看以数据“1”为分界的数据分布形态。
路径图 辅助线位置设置,如下图所示:
可以设置组件中数据的展示形式,组件的展示形式有 2 种:滚动展示和轮播展示。未开启循环播放时,动画只在启动全屏时播放一次,开启循环播放之后才会按照间隔时间循环播放动画。
路径图 轮播效果,如下图所示:
图形文本是将每个数值或百分比显示在组件的图形上面。
路径图 图形文本样式,如下图所示:
内边距可以设置组件中心距离上下左右边框各自的位置,单位为px。
提示信息指的是鼠标移动到组件上时显示的信息,提示信息样式包括:提示框样式、文字样式和数据格式的设置。
路径图 提示信息样式,如下图所示:
通常我们可以通过直接点击和拖动组件来设置大小和位置,在这里也可以通过直接输入X 坐标、Y 坐标、宽和高来设置。
配置项 | 说明 |
---|---|
组件大小 | 组件的 X、Y 轴坐标,X 坐标为组件左上角距离页面左边界的像素距离,Y 坐标为组件左上角距离页面上边界的像素距离。 |
组件位置 | 即组件的宽度和高度,单位为px。 |
组件旋转 | 三维空间旋转可以输入任意数值,数值对应角度向 X 轴/Y 轴旋转。 |
在此处可以对组件边框的边框颜色、宽度、图形边框圆角半径等样式进行配置。
路径图 边框样式,如下图所示:
组件默认没有背景颜色,如果需要设置背景颜色,可以在此处进行设置,也可以将背景设置为一张图片或视频,可以选择填充方式和模糊程度。
路径图 无背景色样式,如下图所示:
交互功能为组件赋予了在一定条件下与大屏操作进行交互的能力。
【温馨提示】详细的交互设置请参考设置交互教程。
对数据进行配置可以让组件根据相应的数据显示对应的图形,目前,山海鲸可视化软件支持导入文件数据、连接数据库、连接 API、连接山海鲸数据管家等多种数据连接方式。
在组件中,X 轴字段为横坐标,反应了条形的组成部分,Y 轴字段为纵坐标,反应了每一个条形部分的长度。可将数据拖拽放入对应轴字段展示数据,也可单击后一一勾选。
当X 轴为一个字段,Y 轴为一个字段时,组件如下所示:
上图中所用示例数据如下:
x | y | 时间 |
---|---|---|
6.5 | 1 | 1965 |
6.5 | 1.05 | 1966 |
6.4 | 1.1 | 1967 |
6.3 | 1.12 | 1968 |
5.5 | 1.15 | 1969 |
5.7 | 1.19 | 1970 |
5.8 | 1.14 | 1971 |
5.9 | 1 | 1972 |
5.7 | 0.96 | 1973 |
使用动态数据,可以更灵活地对组件中的每一个样式属性做设置。
【温馨提示】详细的动态数据项设置请参考设置动态数据项教程。
假设有 2 个表单分别为表单 A、表单 B,将 A 表单里某个字段的值作为查询条件,关联引用出 B 表单的数据,并填写到指定的字段中,就是数据联动。
联动项 | 说明 |
---|---|
联动其他组件 | 开启数据联动后,单击一个图表中的任一数据点,其他使用相同数据集的图表也会随其联动变化。 |
受其他组件联动 | 开启数据联动后,图表中的数据会随发起联动的组件的变化而变化。 |
【温馨提示】详细的数据联动设置请参考设置数据联动教程。
将满足条件的数据通过筛选过滤出来。
筛选条件 | 说明 |
---|---|
不筛选 | 不进行数据筛选。 |
筛选数据源指定行 | 可选择筛选数据源某一行数据。 |
选择数据条件 | 可自行选择数据筛选的条件。 |
【温馨提示】详细的数据筛选设置请参考设置数据筛选教程。
通过添加JavaScript 文件,可以满足对组件进行二次开发的需求。
例如,我们希望组件能够自动在大屏上向右移动,只需添加相应的JavaScript 文件即可实现,以下为本教程使用的示例代码:
1 | /** |
点击“选择资源文件”,添加含示例代码的 JavaScript 文件。
添加完成后会代码会自动执行,此时组件已经能够自动在大屏上向右移动了。
【温馨提示】详细的代码设置请参考二次开发教程。
组件的每个样式属性都可以打开一个“扩展设置”菜单,将鼠标移至属性名称的右侧点击后即可看到,菜单共包含三个选项:“条件样式”、“调用代码示例”、“生成数据字段”。
此功能可以将已经设置好的数据条件应用于组件的样式属性中,便于实现组件在不同条件下的状态。
【温馨提示】详细的条件样式设置请参考数据条件教程。
此功能用于组件的二次开发,便于编写二次开发相关的JavaScript 代码。
【温馨提示】详细的调用代码示例设置请参考二次开发教程。
此功能可以给组件的样式属性生成一个“动态数据项”,便于精准控制样式的属性值。
【温馨提示】详细的生成数据字段设置请参考设置动态数据项教程。
组件可以设置多个状态,状态之间可以通过设置状态触发条件来进行切换。
【温馨提示】详细的组件状态设置请参考设置组件的多状态教程。