编辑导语：股票等金融行业经常会用到K线图，一个清晰明了的K线图可以让我们直观的看到交互效果，也能节省时间成本；本文作者分享了关于使用中继器制作K线图的教程，我们一起来学习一下。

K线图应用于股票、贵金属、期货等等的金融交易中，所以K线图成了金融交易软件必不可少的一个元件。

目前市面上的k线图原型都是图片，不能让老板或者甲方爸爸更直观的看到交互效果；所以作者出了这期教程，教你们如何使用中继器来制作K线图，这样做的好处就是不用重复设置交互，只要修改中继器表格里面的数据，系统就能自动画出k线图，这样做省时省力，复用性高。

本期教程属于高级课程，涉及比较多的函数，大家要认真学习哈。

如果喜欢的同学们关注一下作者，如果你们想学的话，后续会继续出分时图、成交量图等制作教程。

原型预览地址：https://mv8s2o.axshare.com/#id=fibury&p=k线图&g=1

制作完成后的效果如下图：

一、准备材料

文本框：

• 价格**值（上图中的3500），这两个值需要手工填入，用于后续计算。
• 价格最小值（上图中的2850），这两个值需要手工填入，用于后续计算。

日期：

图中2020/6/1、7/2、7/31、8/31，时间随便输入，多少个都可以，你们按实际需要。

框线：

由水平线和垂直线组合而成，组合名字外框，外框一是为了好看，二是后面这个外框的尺寸会用于计算。如下图摆放即可：

十字坐标线：

由水平线和垂直线组合而成，放置在外框的中部，十字坐标的高度和欢度和框线一致，默认隐藏；十字坐标线的目的是为了鼠标移入k线图时，显示鼠标具体位置的数值。

数值标签：

价格值标签(左边标签)，显示鼠标指针处的价格数值，默认隐藏。

时间值标签(下方标签)，显示鼠标指针处的时间数值，默认隐藏。

K线弹窗：

弹窗是鼠标移入时可以看到具体的日期的k先数据,默认隐藏，里面需要包含日期、开盘价、收盘价、**价、**价、涨幅、交易量的文本框。

中继器内材料：

矩形：用于计算开盘价和收盘价，默认红色，选中是设置为绿色。

垂直线：用于计算**价和**价，默认红色，选中是设置为绿色。

中继器表格：

需要设置以下几列：

• date：时间日期
• Opening_price：开盘价
• closing_price：收盘价
• max_price：**价
• min_price：**价
• volume：成交量
• rate：今日涨幅

温馨提示：中继器里面的数据可在excel中直接复制，然后中继器布局记得选水平。

二、制作交互