ios股票K线图的绘制
来源:互联网 发布:人工智能硬件解决方案 编辑:程序博客网 时间:2024/05/01 01:50
前言:因为工作需要,要绘制一个股票K线图,因为自己不炒股,所以对股票知识很是有限,当时也想在网上找个demo直接拿来用的,但是找了很多都不合适,后来查了些资料,也看了很多别人的demo,打算自己写,此文针对不会画直线画文字的新手, 没有考虑优化问题! 大神请略过 !
因为自己当时对股票知识很是有限, 所以这里就从最基础说起, 首先看一下K线图解, 了解一下一个K线点所需要的数据:
阳线代表股票上涨(收盘价大于开盘价), 阴线则代表股票下跌(收盘价小于开盘价), 由此可以看出画一个K线点需要四个数据, 分别是: 开盘价 - 收盘价 - 最高价 - 最低价, 根据这四个数据画出上影线实体以及下影线, 柱状图(成交量)先不考虑, K线图画出来之后, 成交量柱状图就不在话下了;
这里主要说一下怎么绘制线段和实体以及字符串,这些如果会了,那么绘制K线图就不是问题了;
创建一个继承自UIView的类YBStockChartView, 就在这个类里边进行绘制, 首先要绘制背景, 无非就是那些横线竖线虚线之类的, 下边是画一条从p1
到p2
的实线线段的代码:
- (void)drawRect:(CGRect)rect { [super drawRect:rect]; // 设置背景填充颜色 CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSetFillColorWithColor(context, [UIColor blackColor].CGColor); CGContextFillRect (context, self.bounds); // 填充范围 // 画线段 CGPoint p1 = CGPointMake(20, 20); CGPoint p2 = CGPointMake(rect.size.width - 20, rect.size.height - 20); CGContextSetLineWidth(context, 1.0f); CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor); CGContextMoveToPoint(context, p1.x, p1.y); CGContextAddLineToPoint(context, p2.x, p2.y); CGContextStrokePath(context);}
如果要画虚线加上这句CGFloat dash[] = {1,3};CGContextSetLineDash(context, 0, dash, 0);
代码即可,关于虚线,感兴趣的可以上网搜一下更加详细说明,这里只简单说一下{1,3}代表画一个点,空三个点,在画一个点在空三个点这样循环画出来的一条虚线;
会画线段之后,K线图背景就可以这样轻轻松松的画出来了,那么接下来开始绘制K线点,K线点常见的有两种, 一种是空心的一种是实心的,我们先来画一个空心的,空心的分解一下就是两条线段加上一个矩形边框,只需要四个点就可以画出来,如下图:
下边是实现代码:
- (void)drawRect:(CGRect)rect { [super drawRect:rect]; CGPoint p1 = CGPointMake(100, 30); CGPoint p2 = CGPointMake(100, 70); CGPoint p3 = CGPointMake(100, 120); CGPoint p4 = CGPointMake(100, 170); CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor); CGContextSetLineWidth(context, 2.0); // p1 -> p2线段 CGContextMoveToPoint(context, p1.x, p1.y); CGContextAddLineToPoint(context, p2.x, p2.y); // p3 -> p4线段 CGContextMoveToPoint(context, p3.x, p3.y); CGContextAddLineToPoint(context, p4.x, p4.y); CGContextStrokePath(context); // 中间实体边框 CGContextStrokeRect(context, CGRectMake(100 - 14 / 2.0, p2.y, 14, p3.y - p2.y));}
下边开始画实心的,实心的比空心的简单,可以先画一条线段直接从p1画到p4,然后在中间在画实体就好了下边是效果图:
实现代码:
- (void)drawRect:(CGRect)rect { [super drawRect:rect]; CGPoint p1 = CGPointMake(185, 30); CGPoint p2 = CGPointMake(185, 70); CGPoint p3 = CGPointMake(185, 120); CGPoint p4 = CGPointMake(185, 170); CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor); CGContextSetLineWidth(context, 2.0); // p1 -> p4 CGContextMoveToPoint(context, p1.x, p1.y); CGContextAddLineToPoint(context, p4.x, p4.y); CGContextStrokePath(context); // 画实心实体 CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor); CGContextFillRect(context, CGRectMake(p1.x - 14 / 2.0, p2.y, 14, p3.y - p2.y));}
然后将画K线的代码封装成一个方法,然后将最高价最低价开盘价收盘价等转换成坐标,通过传入四个参数就可以将K线点画出来,然后循环调用该方法就好,至于均线就是一个点一个点连接起来的,同样可以通过线段画出来,这里就不多说了,还有一个十字线,这个只要会画线段就会画十字线,这个也不多说了;
之前看到别人的demo K线图可以左右滑动以及放大缩小,本来还以为是像ScrollView那样的,后来发现并不是这样,而是当手指滑动或者啮合的时候调用了- (void)drawRect:(CGRect)rect
方法,而是又重新画上去了,因为调用比较频繁,所以看起来像是在滑动一样!在这里需要一个变量来控制绘制显示在视图上的第一个点,然后在通过K线点宽度以及K线点之间的间隔计算出该视图上能绘制会少个K线点,当手势滑动或者啮合的时候通过控制这个变量来控制要绘制的第一个点!这点复杂,但是不难,就不多说了!
还需要一个变量来记录当前手指滑动所选择的K线点,然后在手指滑动的时候通过代理方法或者block将该点所对应的模型传过去,这样在外部就可以获取到当前用户所点击或者选择模型对应的数据,在外部就可以进行其他操作;
接下来就是画文字,显示日期时间对应的价格日期等信息,画文字或者说画字符串更合理一点,用的是属性字符串NSMutableAttributedString
废话不多说,上代码:
- (void)drawRect:(CGRect)rect { [super drawRect:rect]; NSString *str = @"我是要绘制的字符串"; NSMutableAttributedString *attributedStr = [[NSMutableAttributedString alloc] initWithString:str]; // 设置字符串字体大小以及颜色 [attributedStr setAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:20], NSForegroundColorAttributeName:[UIColor greenColor]} range:NSMakeRange(0, str.length)]; // 要绘制的区域 CGRect strRect = CGRectMake(50, 80, attributedStr.size.width, attributedStr.size.height); // 给字符串添加一个弧形背景 CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor); UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:strRect cornerRadius:attributedStr.size.height / 2.0]; CGContextAddPath(context, path.CGPath); CGContextDrawPath(context, kCGPathEOFill); // 绘制 [attributedStr drawInRect:strRect];}
效果图:
这些掌握了之后就可以绘制专属自己的K线图了,其他的都是一些细节小问题,CGContextRef还有很多用法,有兴趣的自己可以找度娘,接下来附上我的最终的绘制结果:
另外这个demo我已经封装好了,可以直接拿去使用,本来是想连那些指标什么的都绘制好的,因为自己对股票知识不了解,在加上公司把这部分功能给砍了,所有demo里边就没有绘制各项指标;
Demo已上传github
如果对你帮助就给个star吧!
- ios股票K线图的绘制
- iOS 股票K线图绘制
- iOS 绘制股票K线图
- IOS 股票K线图的实现
- 利用JFreeChart绘制股票K线图
- R语言绘制股票K线图
- IOS中国内股票K线图基本绘制思路(一)——数据处理
- js股票K线图,比较专业的K线图插件
- 股票k线图的技巧分析
- 使用Python画股票的K线图
- 转:利用JFreeChart绘制股票K线图完整解决方案
- WPF中使用amCharts绘制股票K线图
- 利用JFreeChart绘制股票K线图完整解决方案
- WPF中使用amCharts绘制股票K线图
- WPF中使用amCharts绘制股票K线图
- 利用JFreeChart绘制股票K线图完整解决方案
- 利用 python numpy +matplotlib 绘制股票k线图
- android 股票K线图
- 用java发送电子邮件
- 事件(四)
- 判断二分图 染色法 NYOJ 1015
- 远程桌面提示凭证不工作
- jdk7 WatchService 监控文件夹
- ios股票K线图的绘制
- 第十六周数据结构学期总结
- MySQL 运维
- android pull to refresh listview 框架使用demo
- 量化投资(一):在python平台上设置买入卖出
- 虚拟现实产业无法停止增长,但工人的供给是有限的 Noland专注于在加州欧文市的EON Reality的教育和能源技术应用。EON设计应用程序来培训不同行业的工人。例如,埃克森美孚(Exxon
- linux vim编辑器的配置
- 第八周项目3对称矩阵压缩存储的实现与应用(3)
- 求二进制数中1的个数