登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

LPLineChartView

[复制链接]
来自: 李世铿 分类: iOS精品源码 上传时间: 2016-7-19 14:44:25
Tag:图表 折线图 charts chart LineChartView

项目介绍:

LPLineChartView

参照UICollectionview的架构实现的折线图LPLineChartView。将布局交给Layout实现,通过Layer进行绘制。提供“虚基类”LPLineChartViewLayout定义需要的空方法。在LPLineChartView里用指针指向LPLineChartViewLayout的实例。

在这种设计模式下,UICollectionview基本所有与UI相关的部件全都通过Layout去获取对应的Layer。这样的好处类似于UICollectionview,基本可是实现任何想要的布局。比如:轴线、箭头、数据点、连接线、参考线、轴线文字、背景等都是通过Layout去获取对应的Layer。这样你就可以充分开发脑洞去绘制任何想要的效果。(任何形状,贝塞尔曲线,渐变,字体,甚至图片,遮罩都是可以的)当然,这种模式下,必然导致使用的难度极度增加。所以就必须提供一个默认实现LPLineChartViewCustomLayout。(类似UICollectionview的UICollectionviewFlowLayout)

LPLineChartViewCustomLayout继承自LPLineChartViewLayout,实现了所有需要定制的内容。然后在头文件中提供参数去调整布局过程中的主要样式。通过这些参数基本可以实现大部分对折线图的个性化定制。

在使用的时候通过子类化LPLineChartViewCustomLayout,在prepareLayout方法中重新设置这些参数或者部分,被设置的部分就会覆盖LPLineChartViewCustomLayout的默认值。 如果个别地方实在不能满足需求,也可以通过在子类中重新实现部分相关的方法去通过Layer自由定制。

通过两种方案的结合就提供了使用既简单又可高度定制的折线图。下边实现了几种展示效果,这些效果均在10行代码以内实现。如下。(右上角样式为LPLineChartViewCustomLayout)



UsageLPLineChartViewLayout

LPLineChartViewLayout可供设置的方法。

[Objective-C] 查看源文件 复制代码
 (void)prepareLayout;

- (UIColor *)colorForAxis:(LPAxis)axis;
- (CGFloat)widthForAxis:(LPAxis)axis;
- (CAShapeLayer *)arrowForAxis:(LPAxis)axis;
- (CAShapeLayer *)pointForAxis:(LPAxis)axis withCount:(NSInteger)count;
- (CGFloat)endSpaceForAxis:(LPAxis)axis;
- (CATextLayer *)textForAxis:(LPAxis)axis;

- (UIEdgeInsets)edgeForChart;
- (UIColor *)colorForChart:(NSInteger)count;
- (CGFloat)widthForChart:(NSInteger)count;
- (CAShapeLayer *)pointForChart:(NSInteger)count;

- (CAGradientLayer *)GradientLayerForBackground;
- (CAShapeLayer *)refrenceForBackground:(LPAxis)axis withCount:(NSInteger)count;

+ (CGFloat)textWidthWithString:(NSString *)string font:(UIFont *)font;

LPLineChartViewCustomLayout

LPLineChartViewCustomLayout可供设置的属性。

[Objective-C] 查看源文件 复制代码
//背景
@property (nonatomic, strong) UIColor *topBackgroundColor;
@property (nonatomic, strong) UIColor *bottomBackgroundColor;
@property (nonatomic, strong) UIColor *xRefrenceLineColor;
@property (nonatomic, assign) CGFloat xRefrenceLineWidth;
@property (nonatomic, strong) NSArray<NSNumber *> *xRefrenceLineDashPattern;
@property (nonatomic, strong) UIColor *yRefrenceLineColor;
@property (nonatomic, assign) CGFloat yRefrenceLineWidth;
@property (nonatomic, strong) NSArray<NSNumber *> *yRefrenceLineDashPattern;

//图表
@property (nonatomic, assign) UIEdgeInsets chartEdge;
@property (nonatomic, strong) UIColor *chartLineColor;
@property (nonatomic, assign) CGFloat chartLineWidth;
@property (nonatomic, strong) UIColor *chartPointColor;
@property (nonatomic, assign) CGFloat chartPointRadius;

//文字
@property (nonatomic, strong) UIColor *xTextColor;
@property (nonatomic, strong) UIColor *yTextColor;
@property (nonatomic, strong) UIFont *xTextFont;
@property (nonatomic, strong) UIFont *yTextFont;
@property (nonatomic, assign) CATransform3D xTextTransform;

//箭头
@property (nonatomic, assign) CGFloat indicatorRadius;
@property (nonatomic, assign) CGFloat indicatorWidth;
@property (nonatomic, strong) UIColor *indicatorColor;

//轴线
@property (nonatomic, assign) CGFloat axisEndSpace;
@property (nonatomic, assign) CGFloat axisWidth;
@property (nonatomic, strong) UIColor *axisColor;
@property (nonatomic, assign) CGFloat axisPointRadius;
@property (nonatomic, strong) UIColor *axisPointColor;

DataSource

数据源采用数组注入的方式。

data:数据源

yRange:Y轴坐标范围

ySpace:Y参考线/点/文字间隔

yKey:通过yKey在数组中拿到每个点的Y坐标值

xRankKey:通过xRankKey对X轴的数据进行排序

xKey:通过yKey在数组中拿到每个点需要显示的文字

xData:x轴自定义数据

xMinCount:x轴显示个数下限

xMaxCount:x轴显示个数上限

[Objective-C] 查看源文件 复制代码
_data = @[@{@"id": @"1", @"name":@"1", @"grade":@"30"},
          @{@"id": @"2", @"name":@"2", @"grade":@"40"},
          @{@"id": @"3", @"name":@"3", @"grade":@"62"},
          @{@"id": @"4", @"name":@"4", @"grade":@"76"},
          @{@"id": @"5", @"name":@"5", @"grade":@"79"},
          @{@"id": @"6", @"name":@"6", @"grade":@"90"},
          @{@"id": @"7", @"name":@"7", @"grade":@"86"},
          @{@"id": @"8", @"name":@"8", @"grade":@"71"},
          @{@"id": @"9", @"name":@"9", @"grade":@"100"},
          @{@"id": @"10", @"name":@"10", @"grade":@"87"}];
_yRange = NSMakeRange(0, 100);
_ySpace = 20;
_yKey = @"grade";
_xRankKey = @"id";
_xKey = @"name";


More
  • 如果数据源中某个点的值为null,那么图表将会跳过该点直接于下一个点相连。如果为null的点在数据源头或尾,那么头或尾将会空去一部分。
  • 如果某个数据点对应的x轴文字为null,那么对应的x轴将不会显示,但是数据点可以正常显示。
  • 图片可以设置数据点个数的上限和下限。设置下限后,如果数据点个数不足,图表的后边将会用数据点补足。设置上限后,超过上限后将会智能隐藏一部分x轴文字同时保证x轴每个点间距相等。具体的算法于number相似,有兴趣可以通过demo探求。
  • 如果x轴数据是固定的,不需要和数据点对应,可以通过xData数组来设置固定值。

DEMO 直接下载:



相关源码推荐:

我来说两句
*滑动验证:
所有评论(424)
wufer 2016-7-19 15:22:30
楼主用心了,内容非常精彩。
回复
wufer 2016-7-19 15:22:38
感谢分享,Code4App有你更精彩
回复
nihaoy 2016-7-19 16:39:59
很给力,Code4App有你更精彩!
回复
code4app热心网友 2016-7-19 17:08:59
学习学习!
回复
1175016718@qq.c 2016-7-19 17:08:59
楼主用心了,内容非常精彩。
回复
code4app热心网友 2016-7-19 17:09:00
感谢分享,Code4App有你更精彩:)
回复
ainihui1314 2016-7-19 17:44:48
楼主用心了,内容非常精彩。
回复
张雨露Main 2016-7-19 17:53:37
版主要把linechart垄断了。。。
回复
张雨露Main 2016-7-19 17:55:29
版主,求私信一个QQ加个好友!
回复
提取码:  下载次数:322 状态:已购或VIP 售价:0(原价:10)金钱 下载权限:初级码农 
6750 2 322
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,742864542

如何获得代码达人称号?

代码贡献英雄榜
用户名 下载数
通过邮件订阅最新 Code4App 信息
上一条 /4 下一条
联系我们
关闭
合作电话:
13802416937
Email:
435399051@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| 广东互联网违法和不良信息举报中心|中国互联网举报中心|Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

快速回复 返回顶部 返回列表