K线图

文档基于K线图v1.1.8版本


组件说明

K线图以横坐标为时间维度,纵轴为成交量来模拟股市交易中的蜡烛变化趋势。


效果案例

*K线图 效果案例

一、样式

在样式中可以设置组件的基本属性全局样式、图例、滑过标签、K线数据缩放X/Y轴数据系列

1、基本属性

位置尺寸

位置包括组件的横坐标纵坐标,单位为px;横坐标为组件左上角距离页面左边界的像素距离,纵坐标为组件左上角距离页面上边界的像素距离。

尺寸包括组件的宽度高度,单位为px;可单击比例锁锁定组件宽高比,等比例调整组件的宽高,比例锁默认不锁定。

基本柱状图组件尺寸不影响组件内容显示、组件动画。

*组件位置尺寸说明


默认隐藏

勾选之后在初始加载时组件默认隐藏且关闭回调触发,通常用来配合显隐控制,如【选项卡】组件进行显隐切换。

2、全局样式

外间距

组件内蜡烛图图与坐标轴间距。


边距

基本柱状图表距离整个组件四边(上、下、左、右)的边距。

*边距样式说明


3、图例

图例文本

字号:图例文本字号。

颜色:图例文本颜色。


图例布局

位置

图例位置,上中下三个位置。

对齐

图例对齐方式,分为开头/中央/结尾三种样式。

间距

图例之间间距。

图形

图例图形,可设置间距/大小/图例类型。


4、滑过标签

强制位置

强制设定标签的列数和偏移位置

前缀

在前缀中可设置滑过标签中前缀的图标形状与大小,如下图标注所示图标为方形图标。

*K线图滑过标签前缀说明


文本

如上前缀示例图中所示,滑过标签中还包含文本,比如"MA30",文本中可设置文本字体、字号和颜色。


数字后缀

滑过标签中还包含数值后缀,可设置数值后缀字体、字号、颜色和保留小数位数。

辅助线

辅轴样式

辅轴即定位在K线图某点后,在坐标轴Y轴会出现一个辅轴。在辅轴样式中可设置辅轴背景颜色、轴值字体、

轴值字号和轴值颜色。


X轴线

辅助线中X轴颜色和粗细。

Y轴线

辅助线中Y轴颜色和粗细。

5、K线

在K线图中可设置K线中阴线和阳线的不同样式。配置项相同。

颜色

K线图中蜡烛颜色。

柱子粗细

K线图中蜡烛柱子粗细程度。

线粗细

蜡烛图中上影线和下影线粗细。


6、数据缩放

默认在K线图下方默认配置了数据缩放功能的手柄,可以用来缩放选择需要查看的范围日期内K线走势。

缩放范围

数据缩放手柄缩放范围。

位置

手柄位置,可位于组件上方或者下方。

缩放锁定

开启缩放锁定后,组件数据无法缩放。

文本样式

手柄格文本样式,可设置文本字体/字号和颜色。

数据背景样式

手柄中被选中范围和边缘区域背景颜色。

手柄图标

手柄图标,需要上传SVG格式文件。

手柄背景颜色

手柄背景颜色。

7、X/Y轴

K线图数据分X/Y轴,设置配置相同,当前以X轴为例。

文本

X轴文本样式,可设置字号颜色

轴标签

类型

分为日期时间/类目类型两种类型,当设置为日期时间类型后,可设置日期时间显示格式。

数量

X轴标签数量

角度

可设置为水平、斜角和垂直三种角度。

轴单位

坐标轴轴单位,并可设置整体偏移量。


轴线

轴标轴轴线样式,可配置坐标轴颜色刻度线粗细

刻度线

开启刻度线后可在坐标轴显示刻度,在此可设置刻度线颜色粗细程度。

网格线

开启网格线后组件数据显示部分会以网格线为背景展示数据。

粗细

网格线粗细。

轴线

分实线和虚线两种样式。

颜色

网格线颜色。

偏移

网格线偏移量。

8、数据系列

K线图用系列代表K线图中不同概念数据,例如“MA5”和“MA10”,点击即可增加一个维度数据,即可删除一个系列数据。

系列名

即新增的系列系列名称。

周期

即显示周期点,如“MA5”每隔5个交易日显示均值。

折线

可设置代表系列的折线的颜色/样式和粗细和是否开启近似曲线功能。

圆点

在圆点中可设置圆点模式为单点/双点,并可设置内外圆半径/描边和颜色。

数值标签

开启数值标签后会在对应系列数值旁显示数值标签,可设置标签颜色/字号/偏移量。

标题标签

标题标签可显示该系列标题,比如“日K”,“月K”。

数字轮播

开启轮播功能后会轮播K线图内数据,可设置轮播框时间间隔/背景/圆点/文字样式。


二、数据

组件数据格式

字段

说明

x

日期

open

开盘

close

收盘

lowest

最低点

highest

最高点

title

标题


JSON数据案例

[
	{
		"x": "2013/2/5",
		"open": 2411,
		"close": 2433.13,
		"lowest": 2403.3,
		"highest": 2437.42,
		"title": "日K"
	}
]


数据配置项说明

配置项

说明

数据源

数据源类型、数据源选择等

数据过滤器

勾选启用数据过滤器,单击添加过滤器,可在设置数据源页面中配置数据过滤器,详情请参见数据过滤器使用说明

数据响应结果

展示数据请求的响应结果

自动更新

选中后可以设置数据请求时间间隔


数据对接详情

数据对接详情请见以下文档👇

项目交付——数据对接入门



三、交互

载入动画

所有组件均提供移入、移入(小)、划变三种组件载入动画。

载入动画选择无时,则组件没有载入动画。

载入动画仅在可视化应用预览、发布组件加载时显示。


载入动画配置项:

配置项

说明

渐隐渐显

启用是

速率

匀速、慢快慢(cubic-bezier(0.25,0.1,0.25,1))、低速开始、低速结束、低速开始和结束(cubic-bezier(0.42,0,0.58,1))

方向

动画方向

持续时间

载入动画持续时间,单位为ms

延时

载入动画延时长,单位为ms




自定义事件

自定义事件为「交互事件」的增强模块,支持通过数据驱动组件状态、或变更组件样式配置,也可自定义编辑复杂的条件逻辑;

详细的自定义事件教学👉自定义事件教学


欢迎您在评论区留下您对该组件的意见,管理员会及时回复您,如长时间未回复欢迎您搜索钉钉群:33782396或者扫描以下二维码添加微信群   说出您的想法,采纳后将送出定制礼品。

也可以通过问卷来向我们反馈需求:https://jinshuju.net/f/XyCXU0



400-8505-905复制
免费试用
在线咨询
微信社区
易知微-数据可视化
微信扫一扫入群