最近公司项目中需要用到折线图，本来想着使用成熟的第三方框架，但是不能很好地满足项目需求，索性自己实现和封装了一个。
1.功能简介
支持或满足以下功能，如下：
- x轴、y轴分别可支持是否显示，以及它的颜色、线宽
- x轴文字支持大小、颜色、旋转
- y轴文字可支持是否显示、大小、颜色、格式
- y轴坐标值可不设置，可根据点的值自动计算
- 折线图可支持设置边距
- 横向分隔虚线可支持是否显示，以及它的颜色、线宽
- 折线可支持动画、颜色、线宽，支持显示一条或多条折线
- 折线可支持直线、贝塞尔曲线
- 折线上的点支持是否显示、填充颜色、描边颜色，以及有圆形、方形、三角形三种形状可选
- 折线上的点支持是否显示文字，以及文字的颜色、大小以及格式
- 可支持显示渐变区域
- 可支持折线图数据更新
大家肯定会说：无图说个JB。行，先上效果图，是不是有种熟悉的感觉？
折线图.png
2.实现步骤
实现步骤大概如下：
- 首先绘制x轴、y轴、分割点和横向网格虚线
- 创建并显示x轴和y轴的文字控件
- 计算所有折线上点的位置
- 绘制折线以及折线上的点
- 创建并显示折线上点的文字控件
实现步骤很清晰，看上去不难，其实里面有很多细节需要调整和优化，比较花时间。
3.如何使用
那我直接上代码，这样就一目了然，使用起来还是很简单的
GBLineChart *chart = [[GBLineChart alloc] initWithFrame:CGRectMake(0, 100, CGRectGetWidth(self.view.bounds), 220)];
[self.view addSubview:chart];
chart.xLabelTitles = @[@"1月",@"2月",@"3月",@"4月",@"5月",@"6月",@"7月",@"8月",@"9月",@"10月",@"11月",@"12月",];
chart.yLabelTitles = @[@"0", @"20", @"40", @"60", @"80", @"100"];
chart.xLabelRotationAngle = M_PI/6;
chart.showCoordinateAxis = YES;
chart.xLabelAlignmentStyle = GBXLabelAlignmentStyleFullXAxis;
NSMutableArray *array = [NSMutableArray array];
NSMutableArray *array1 = [NSMutableArray array];
for (int i = 0; i < chart.xLabelTitles.count; i++) {
NSNumber *a = [NSNumber numberWithInteger:arc4random() % 100];
[array addObject:a];
[array1 addObject:[NSNumber numberWithInteger:arc4random() % 100]];
}
GBLineChartData *data = [GBLineChartData new];
data.lineAlpha = 0.7;
data.lineColor = [UIColor blueColor];
data.lineWidth = 1;
data.itemCount = array.count;
data.lineChartPointStyle = GBLineChartPointStyleCircle;
data.inflexionPointStrokeColor = [UIColor redColor];
data.inflexionPointFillColor = [UIColor greenColor];
data.inflexionPointWidth = 6;
data.showDash = YES;
data.lineDashPattern = @[@1,@1];
data.showPointLabel = YES;
data.pointLabelFont = [UIFont systemFontOfSize:10];
data.pointLabelColor = [UIColor blackColor];
data.pointLabelFormat = @"%0.1f";
data.dataGetter = ^GBLineChartDataItem *(NSInteger item) {
return [GBLineChartDataItem dataItemWithY:[array[item] floatValue]];
};
GBLineChartData *data1 = [GBLineChartData new];
data1.lineAlpha = 1;
data1.lineColor = [UIColor orangeColor];
data1.lineWidth = 1;
data1.itemCount = array1.count;
data1.lineChartPointStyle = GBLineChartPointStyleSquare;
data1.inflexionPointStrokeColor = [UIColor cyanColor];
data1.inflexionPointWidth = 5;
data1.showPointLabel = NO;
data1.pointLabelFont = [UIFont systemFontOfSize:10];
data1.pointLabelColor = [UIColor blackColor];
data1.pointLabelFormat = @"%1.0f";
data1.showGradientArea = YES;
data1.startGradientColor = [[UIColor yellowColor] colorWithAlphaComponent:0.6];
data1.endGradientColor = [[UIColor whiteColor] colorWithAlphaComponent:0.0];
data1.dataGetter = ^GBLineChartDataItem *(NSInteger item) {
return [GBLineChartDataItem dataItemWithY:[array1[item] floatValue]];
};
chart.lineChartDatas = @[data, data1];
chart.chartMarginLeft = 25;
chart.yLabelBlockFormatter = ^NSString *(CGFloat value) {
return [NSString stringWithFormat:@"%0.0f", value];
};
chart.showSmoothLines = YES;
[chart strokeChart];
_lineChart = chart;
嗯，是吧！使用起来还是很简单的。知道你们会说最后demo地址，放心，会有的。这不来了么？
传送门：折线图Demo下载
好了，最后希望大大们下载和使用，提出宝贵意见，一起学习进步~~~
