AXURE中继器高级教程:制作K线图

2021-12-0211:25:28原型设计1 2,927 views1字数 2411阅读模式

来源:做产品但不是经理文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

市面上的k线图原型都是图片,不能让老板或者甲方爸爸更直观的看到交互效果;所以作者出了这期教程,教你们如何使用中继器来制作K线图,这样做的好处就是不用重复设置交互,只要修改中继器表格里面的数据,系统就能自动画出k线图,这样做省时省力,复用性高。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

本期教程属于高级课程,涉及比较多的函数,大家要认真学习哈。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

如果喜欢的同学们关注一下作者,如果你们想学的话,后续会继续出分时图、成交量图等制作教程。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

原型预览地址:https://mv8s2o.axshare.com/#id=fibury&p=k线图&g=1文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

制作完成后的效果如下图:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

AXURE中继器高级教程:制作K线图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

一、准备材料

文本框:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

  • 价格最大值(上图中的3500),这两个值需要手工填入,用于后续计算。
  • 价格最小值(上图中的2850),这两个值需要手工填入,用于后续计算。

日期:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

图中2020/6/1、7/2、7/31、8/31,时间随便输入,多少个都可以,你们按实际需要。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

框线:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

由水平线和垂直线组合而成,组合名字外框,外框一是为了好看,二是后面这个外框的尺寸会用于计算。如下图摆放即可:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

AXURE中继器高级教程:制作K线图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

十字坐标线:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

由水平线和垂直线组合而成,放置在外框的中部,十字坐标的高度和欢度和框线一致,默认隐藏;十字坐标线的目的是为了鼠标移入k线图时,显示鼠标具体位置的数值。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

AXURE中继器高级教程:制作K线图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

数值标签:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

价格值标签(左边标签),显示鼠标指针处的价格数值,默认隐藏。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

时间值标签(下方标签),显示鼠标指针处的时间数值,默认隐藏。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

AXURE中继器高级教程:制作K线图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

K线弹窗:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

弹窗是鼠标移入时可以看到具体的日期的k先数据,默认隐藏,里面需要包含日期、开盘价、收盘价、最高价、最低价、涨幅、交易量的文本框。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

AXURE中继器高级教程:制作K线图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

中继器内材料:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

矩形:用于计算开盘价和收盘价,默认红色,选中是设置为绿色。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

垂直线:用于计算最高价和最低价,默认红色,选中是设置为绿色。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

AXURE中继器高级教程:制作K线图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

中继器表格:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

需要设置以下几列:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

  • date:时间日期
  • Opening_price:开盘价
  • closing_price:收盘价
  • max_price:最高价
  • min_price:最低价
  • volume:成交量
  • rate:今日涨幅

温馨提示:中继器里面的数据可在excel中直接复制,然后中继器布局记得选水平。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

AXURE中继器高级教程:制作K线图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

二、制作交互

1. k线颜色

首先我们要区分这只股票今天是红色的还是绿色的,这个只需要比较开盘价和收盘价;如果开盘价大于收盘价,那就是绿色的,如果收盘价大于开盘价,那就是红色的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

因为一开始我们已经设置了中继器内矩形和垂直线选中时变成绿色,所以,我们只需要在中继器每项加载时做判断,如果开盘价大于收盘价,选中中继器内矩形和垂直线即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

具体交互如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

AXURE中继器高级教程:制作K线图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

2. 设置k线尺寸

我们根据开盘价、收盘价、价格最大值(文本框)、价格最小值(文本框),外框高度,可以算出中继器内矩形的高度=|(收盘价-开盘价)|/(价格最大值-价格最小值)*外框的高度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

这里注意,因为当开盘价=收盘价的时候,在k线图上不是没有东西,而是一条横线,所以最后结果我们统一+1。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

同样,我们根据最高价、最低价、价格最大值(文本框)、价格最小值(文本框),外框高度,可以算出中继器内垂直线的高度=(最高价-最低价)/(价格最大值-价格最小值)*外框的高度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

AXURE中继器高级教程:制作K线图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

3. 设置k线位置

这里我们需要用移动事件来做。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

首先中继器内矩形,x坐标保持原来不变,y坐标=(价格最大值-收盘价)/(价格最大值-价格最小值)*外框的高度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

中继器内垂直线,同样x坐标保持原来不变,y坐标=(价格最大值-最高值)/(价格最大值-价格最小值)*外框高度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

AXURE中继器高级教程:制作K线图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

鼠标移入k线时十字坐标的位置总共有3个事件:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

鼠标移入k线时:显示十字坐标。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

鼠标移出k线时:隐藏十字坐标。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

鼠标在k线图中移动时:移动十字坐标让他们跟随鼠标,对于水平线而言,他是x坐标保持不变,移动y的坐标,理论上应该是鼠标的y坐标值;不过如果是鼠标的y值,就会挡住k线图,所以一般的处理是减一个数,案例中是减4;然后垂直线是y坐标保持不变,移动x的坐标=鼠标的x坐标值-4。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

AXURE中继器高级教程:制作K线图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

鼠标移入k线时数值标签的位置同样也是分3个事件完成:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

鼠标移入k线时:显示两个标签。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

鼠标移出k线时:隐藏两个标签。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

鼠标在k线图中移动时:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

  • 对于价格值标签(左边标签),他是x坐标保持不变,移动y的坐标=鼠标的y坐标值-价格值标签高度的一半;因为上边十字标签减了4,为了让标签中部对齐十字标签,所以还要减4。
  • 对于时间值标签(下方标签),他y坐标保持不变,移动x的坐标=鼠标的x坐标值-时间值标签宽度的一半;因为上边十字标签减了4,为了让标签中部对齐十字标签,所以还要减4。

AXURE中继器高级教程:制作K线图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

鼠标移入k线时数值标签的文本:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

确定标签位置之后,我们还需要设置标签的文本,这样才可以鼠标移动到哪里就看哪里的数据。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

首先是时间标签比较简单,不需要计算,因为表格列date就有记录时间,我们直接让时间值标签的文本=item=date即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

然后价格值标签的文本就需要计算了,=最大值文本-(鼠标的y坐标值-外框的y值)/外框的高度*(最大值文本-最小值文本),然后这里注意还要用tofixed函数进行四舍五入的运算。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

AXURE中继器高级教程:制作K线图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

鼠标移入k线时设置k线弹窗同样是3个事件:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

鼠标移入k线时:显示k线弹窗文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

鼠标移出k线时:隐藏k线弹窗文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

鼠标在k线图中移动时:我们需要设置k线弹窗里面的文本值:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

  • 日期=中继器表格里的date;
  • 开盘价=中继器表格里的Opening_price;
  • 收盘价=中继器表格里的closing_price;
  • 最高价=中继器表格里的max_price;
  • 最低价=中继器表格里的min_price;
  • 涨幅=中继器表格里的rate(这里要注意一点的是,如果你中继器里输入的只是数字,那就要加上%,如果中继器里输入的本来就有%的就不需要了。)
  • 交易量=中继器表格里的volume,这里如果需要加单位的可以在后面补上单位。

AXURE中继器高级教程:制作K线图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

那到这里就制作完成了,完成之后我们只需要在excel整理好数据,然后复制粘贴到中继器表格,就完成了;以后每次使用基本上两分钟就完成一个图,工作效率极高,而且还是高保真的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/22731.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/22731.html
Comments  1  访客  1
    • WF 1

      方便分享下原件吗 1365359380@qq.com 万分感谢

    Comment

    匿名网友 填写信息

    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

    确定