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