支持或满足以下功能,如下:
- x轴、y轴分别可支持是否显示,以及它的颜色、线宽
- x轴文字支持大小、颜色、旋转
- y轴文字支持是否显示、大小、颜色、格式
- y轴文字不设置,可根据点的值自动计算
- 折线图可支持设置边距
- 横向分隔虚线可支持是否显示,以及它的颜色、线宽
- 折线可支持动画、颜色、线宽,支持显示一条或多条折线
- 折线可支持直线、贝塞尔曲线
- 折线上的点支持是否显示、填充颜色、描边颜色,以及有圆形、方形、三角形三种形状可选
- 折线上的点支持是否显示文字,以及文字的颜色、大小以及格式
- 可支持一条折线中显示渐变区域
- 可支持折线图更新
大家肯定会说:无图说个JB。行,先上效果图,是不是有种熟悉的感觉?
实现步骤大概如下:
- 首先绘制x轴、y轴和横向分割虚线
- 显示x轴和y轴的文字控件
- 计算所有折线上点的位置
- 绘制折线以及折线上的点
- 显示折线上点的文字控制
实现步骤很清晰,看上去不难,其实里面有很多细节需要调整和优化,比较花时间。
那我直接上代码,这样就一目了然,使用起来还是很简单的
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;
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.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 = 3;
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 = @"%.0f";
data1.dataGetter = ^GBLineChartDataItem *(NSInteger item) {
return [GBLineChartDataItem dataItemWithY:[array1[item] floatValue]];
};
chart.lineChartDatas = @[data, data1];
chart.showGradientArea = YES;
chart.chartMarginLeft = 35;
chart.startGradientColor = [[UIColor yellowColor] colorWithAlphaComponent:0.9];
chart.endGradientColor = [[UIColor whiteColor] colorWithAlphaComponent:0.0];
chart.yLabelBlockFormatter = ^NSString *(CGFloat value) {
return [NSString stringWithFormat:@"%1.1f", value];
};
chart.showSmoothLines = YES;
[chart strokeChart];
_lineChart = chart;
其次,实现原理也是比较简单的,底部是一个圆,上面同样位置现叠加一个有会值的圆,中间的文字引用第三方框架***UICountingLabel ***
使用起来也非常简单
GBCircleChart *circleChart = [[GBCircleChart alloc] initWithFrame:CGRectMake(0, 100, CGRectGetWidth(self.view.frame), 200) total:@100 current:@30 clockwise:YES shadow:YES shadowColor:[[UIColor grayColor] colorWithAlphaComponent:0.4] displayCountingLabel:YES overrideLineWidth:@4];
[self.view addSubview:circleChart];
circleChart.strokeColorGradientStart = [UIColor blueColor];
circleChart.strokeColor = [UIColor redColor];
// circleChart.shadowColor = [UIColor blueColor];
circleChart.countingLabel.formatBlock = ^NSString *(CGFloat value) {
return [NSString stringWithFormat:@"%0.0f分\n我的成绩单", value];
};
[circleChart strokeChart];
_circleChart = circleChart;
然后看一下如何使用:
NSMutableArray *items = [NSMutableArray array];
NSArray *values = @[@100,@50,@70,@30,@50,@40,@45,];
NSArray *descs = @[@"苹果",@"香蕉",@"花生",@"橙子",@"车子",@"奶子",@"房子",];
for (int i = 0; i < values.count; i++) {
GBRadarChartDataItem *item = [GBRadarChartDataItem dataItemWithValue:[values[i] floatValue] description:descs[i]];
[items addObject:item];
}
GBRadarChart *radarChart = [[GBRadarChart alloc] initWithFrame:CGRectMake(0, 100, CGRectGetWidth(self.view.bounds), 400) items:items valueDivider:20];
radarChart.isShowGraduation = YES;
radarChart.labelStyle = GBRadarChartLabelStyleHorizontal;
[radarChart strokeChart];
[self.view addSubview:radarChart];
_radarChart = radarChart;