最近公司項目中需要用到折線圖挽唉,本來想著使用成熟的第三方框架塘秦,但是不能很好地滿足項目需求建蹄,索性自己實現(xiàn)和封裝了一個碌更。
1.功能簡介
支持或滿足以下功能,如下:
- x軸洞慎、y軸分別可支持是否顯示痛单,以及它的顏色、線寬
- x軸文字支持大小劲腿、顏色旭绒、旋轉
- y軸文字可支持是否顯示、大小焦人、顏色挥吵、格式
- y軸坐標值可不設置,可根據(jù)點的值自動計算
- 折線圖可支持設置邊距
- 橫向分隔虛線可支持是否顯示花椭,以及它的顏色忽匈、線寬
- 折線可支持動畫、顏色矿辽、線寬丹允,支持顯示一條或多條折線
- 折線可支持直線、貝塞爾曲線
- 折線上的點支持是否顯示袋倔、填充顏色雕蔽、描邊顏色,以及有圓形宾娜、方形批狐、三角形三種形狀可選
- 折線上的點支持是否顯示文字,以及文字的顏色碳默、大小以及格式
- 可支持顯示漸變區(qū)域
- 可支持折線圖數(shù)據(jù)更新
大家肯定會說:無圖說個JB贾陷。行,先上效果圖嘱根,是不是有種熟悉的感覺髓废?
折線圖.png
2.實現(xiàn)步驟
實現(xiàn)步驟大概如下:
- 首先繪制x軸、y軸该抒、分割點和橫向網(wǎng)格虛線
- 創(chuàng)建并顯示x軸和y軸的文字控件
- 計算所有折線上點的位置
- 繪制折線以及折線上的點
- 創(chuàng)建并顯示折線上點的文字控件
實現(xiàn)步驟很清晰慌洪,看上去不難,其實里面有很多細節(jié)需要調整和優(yōu)化,比較花時間冈爹。
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下載
好了鸵膏,最后希望大大們下載和使用,提出寶貴意見怎炊,一起學習進步~~~