iOS 图表demo

  最近在看股票软件,看到k线图,于是就想自己画个图表出来,以下是我画图表的思路。
  首先,分析一般业务,图表不一定是一个屏幕尺寸,可能需要延伸,所以我选择在scrollview上进行绘制。然后图表的内容使用CALayerberzerPath来绘制,下面是绘制过程中的代码分析。然后,为了视觉的集中,我默认是在图表纵向的0.35~0.65处进行绘制内容,当然这个可以手动设置,最后说明下需要传入必选参数有dataSource,其他参数及说明如下:

@property (nonatomic, copy) NSArray  *horizontalTitleArray;//x轴方向

@property (nonatomic, copy) NSArray  *dataSource;//数据源

@property (nonatomic, strong) UIColor *lineColor;//连线颜色

@property (nonatomic, strong) UIColor *maskColor;//连线同x\y轴组成部分颜色

@property (nonatomic, assign) CGFloat singleWidth;//每个数据源x方向间隔,默认是74.0f

@property (nonatomic, assign) CGFloat startHeightScale;//起始高度,默认为0.35

@property (nonatomic, assign) CGFloat endHeightScale;//终止高度,默认为0.65
  1. 因为该控件只做了水平方向上滑动,所以水平方向的每个单位间距是由外部传入的,但是纵向的每个单位的间距是通过最大值和最小值计算得到的;
  2. 在确定了间距之后,把scrollview添加上,scrollview是根据数据源和间距计算得到的;
  3. 接下来这步是最重要的,确定数据源对应节点在scrollview上的位置;
  4. 根据节点的位置绘制虚线和连接线;
  5. 根据连线和横纵坐标位置,绘制maskLayer
  6. 绘制横坐标的标签;
- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];
    [self.scrollView removeFromSuperview];
    //1、先计算出数据源每个单位占屏幕单位
    [self calculateDataSource];
    //2、添加scrollview
    [self addScrollView];
    //2、确定每个点的位置,并添加每个点的点击事件
    [self drawPoints];
    //3、连接起各个点
    [self addLineAndDashLine];
    //4、画底部遮罩层
    [self addMask];
    //添加横坐标标签
    [self addHorizontalTitleLabel];
}

到此,一个图表就绘制完成了,可能这个控件还不足以满足所有的业务,但是可以在这个基本思路上进行修改,例如如果要新增动画的,可以在layer上添加anime,如果想纵向滑动,则可以类推的做修改;因为图标的业务很多,而且各不相同,所以就不把这个控件做大,大家可以在这个基础上进行修改。实现效果如下:

效果图.png

项目demo
可以通过cocoapod导入项目中

你可能感兴趣的:(iOS 图表demo)