效果圖 Demo地址
未命名.gif
Demo主要實(shí)現(xiàn)了一下幾點(diǎn)功能
1.折線圖 + stroke動(dòng)畫(huà) + 可左右滾動(dòng)
2.虛線標(biāo)注
3.漸變蒙層填充
4.小圓點(diǎn)展示 + 點(diǎn)擊放大動(dòng)畫(huà)
如果以上效果有滿(mǎn)足您當(dāng)前需要請(qǐng)往下看
拆分界面
調(diào)用示例
- (NXLineChartView * )chartView{
if (!_chartView) {
_chartView = [[NXLineChartView alloc]init];
_chartView.backgroundColor = [UIColor whiteColor];
_chartView.center = CGPointMake([UIScreen mainScreen].bounds.size.width/2, [UIScreen mainScreen].bounds.size.height/2);
_chartView.bounds = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width-100, 200);
_chartView.lineChartXLabelArray = @[@"魅族",@"華為",@"中興",@"小米",@"蘋(píng)果",@"一加",@"樂(lè)視",@"音樂(lè)",@"電視",@"體育"];
_chartView.lineChartYLabelArray = @[];
_chartView.LineChartDataArray = @[@100,@40,@60,@45,@100,@55,@33,@120,@40,@100];
}
return _chartView;
}
#import <UIKit/UIKit.h>
@interface NXLineChartView : UIView
@property (nonatomic, strong) NSArray * lineChartYLabelArray;
@property (nonatomic, strong) NSArray * lineChartXLabelArray; // X軸數(shù)據(jù)
@property (nonatomic, strong) NSArray * LineChartDataArray; // 數(shù)據(jù)源
@end
1.畫(huà)折線，這里通過(guò)UIBezierPath和CAShapeLayer結(jié)合繪圖
先創(chuàng)建可左右滾動(dòng)的scrollView
E66E72C5-76D6-4E08-AA7A-B27DAFA32DFC.png
//可滾動(dòng)視圖
- (UIScrollView *)mainScroll{
if (!_mainScroll) {
_mainScroll = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
_mainScroll.showsVerticalScrollIndicator = NO;
_mainScroll.showsHorizontalScrollIndicator = NO;
[self addSubview:_mainScroll];
}
return _mainScroll;
}
通過(guò)LineChartDataArray獲得的數(shù)據(jù)利诺，進(jìn)行繪制
610EA4B9-561C-49F8-AF06-DB3D9747A498.png
// 設(shè)置折線圖
- (void)setLineChartDataArray:(NSArray *)LineChartDataArray{
_LineChartDataArray = LineChartDataArray;
if (!_LineChartDataArray) return;
// [self drawGragient];
UIBezierPath * bezierPath = [self getPath];
CAShapeLayer * layers = [CAShapeLayer layer];
layers.path = bezierPath.CGPath;
layers.lineWidth = 2.0;
layers.strokeColor = [UIColor redColor].CGColor;
layers.fillColor = [UIColor clearColor].CGColor;
[self doAnimationWithLayer:layers];
[self.mainScroll.layer addSublayer:layers];
// self.gredientView.layer.mask = layers;
[self addTopPointButton]; // 小圓點(diǎn)
[self drawGredientLayer]; // 漸變
}
- (UIBezierPath *)getPath{
self.topPointArray = [[NSMutableArray alloc]init];
UIBezierPath * bezierPath = [UIBezierPath bezierPath];
for (int idx =0; idx<_LineChartDataArray.count; idx++) {
if (idx == 0) {
CGPoint startPoint = CGPointMake([_pointXArray[0] floatValue], self.frame.size.height-[_LineChartDataArray[0] floatValue]-bottomMarginScale);
[bezierPath moveToPoint:startPoint];
[self.topPointArray addObject:[NSValue valueWithCGPoint:startPoint]];
}else{
CGPoint point = CGPointMake([_pointXArray[idx] floatValue], self.frame.size.height-[_LineChartDataArray[idx] floatValue]-bottomMarginScale);
[bezierPath addLineToPoint:point];
[self.topPointArray addObject:[NSValue valueWithCGPoint:point]];
}
}
return bezierPath;
}
線條動(dòng)畫(huà)采用核心動(dòng)畫(huà)strokeEnd這個(gè)效果實(shí)現(xiàn)富蓄，代碼如下
- (void)doAnimationWithLayer:(CAShapeLayer *)layer{
CABasicAnimation * baseAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
baseAnimation.duration = 2;
baseAnimation.fromValue = @0.0;
baseAnimation.toValue = @1.0;
baseAnimation.repeatCount = 1;
[layer addAnimation:baseAnimation forKey:@"strokeAnimation"];
}
2.虛線標(biāo)注
468532F5-8A95-490C-AA67-3C3418E34E01.png
- (void)drawRect:(CGRect)rect {
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGFloat yAxisOffset = 10.f;
CGPoint point;
CGFloat yStepHeight = rect.size.height / self.LineChartDataArray.count;
CGContextSetStrokeColorWithColor(ctx, [UIColor lightGrayColor].CGColor);
CGContextSetFillColorWithColor(ctx, [UIColor redColor].CGColor);
for (NSUInteger i = 0; i < _LineChartDataArray.count; i++) {
point = CGPointMake(10 + yAxisOffset, (rect.size.height - i * yStepHeight + 10 / 2));
CGContextMoveToPoint(ctx, point.x, point.y);
// add dotted style grid
CGFloat dash[] = {6, 5};
// dot diameter is 20 points
CGContextSetLineWidth(ctx, 0.5);
CGContextSetFillColorWithColor(ctx, [UIColor redColor].CGColor);
CGContextSetLineCap(ctx, kCGLineCapRound);
CGContextSetLineDash(ctx, 0.0, dash, 2);
// 這里是改變虛線的寬度
CGRect frame = CGRectMake(rect.origin.x, rect.origin.y, self.totalWidth, rect.size.height);
CGContextAddLineToPoint(ctx, CGRectGetWidth(frame) - 5 + 5, point.y);
CGContextStrokePath(ctx);
}
}
3.漸變蒙層填充
0EADDE88-83BB-4D0F-9957-1251A7090C8D.png
/*
@parameter 背景顏色填充
*/
- (void)drawGredientLayer{
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = CGRectMake(0, 0, self.totalWidth, self.frame.size.height-bottomMarginScale);
gradientLayer.colors = @[(__bridge id)[UIColor colorWithRed:250/255.0 green:170/255.0 blue:10/255.0 alpha:0.8].CGColor,(__bridge id)[UIColor colorWithWhite:1 alpha:0.4].CGColor];
gradientLayer.locations=@[@0.0,@1.0];
gradientLayer.startPoint = CGPointMake(0.0,0.0);
gradientLayer.endPoint = CGPointMake(1,0);
UIBezierPath *gradientPath = [UIBezierPath bezierPath];
[gradientPath moveToPoint:CGPointMake([_pointXArray[0] floatValue], self.frame.size.height-bottomMarginScale)];
for (int i=0; i<_LineChartDataArray.count; i++) {
[gradientPath addLineToPoint:CGPointMake([_pointXArray[i] floatValue], self.frame.size.height-[_LineChartDataArray[i] floatValue]-bottomMarginScale)];
}
[gradientPath addLineToPoint:CGPointMake([_pointXArray[_pointXArray.count-1] floatValue], self.frame.size.height-bottomMarginScale)];
CAShapeLayer *arc = [CAShapeLayer layer];
arc.path = gradientPath.CGPath;
gradientLayer.mask = arc;
[self.mainScroll.layer addSublayer:gradientLayer];
}
4.小圓點(diǎn)展示 + 點(diǎn)擊放大動(dòng)畫(huà)
小圓點(diǎn)
1656071B-9D9B-4E6B-A2D9-7F2DEC6A6D13.png
// 添加小圓點(diǎn)
- (void)addTopPointButton{
if (self.topPointArray.count ==0) return;
for (int idx =0; idx<self.topPointArray.count; idx++) {
CGPoint point = [self.topPointArray[idx] CGPointValue];
UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];
button.center = point;
button.bounds = CGRectMake(0, 0, 10, 10);
button.layer.cornerRadius = 5;
button.clipsToBounds = YES;
button.backgroundColor = [UIColor cyanColor];
button.tag = GAP+idx;
[button setTitle:[self.LineChartDataArray[idx] stringValue] forState:UIControlStateNormal];
[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
button.titleLabel.font = [UIFont systemFontOfSize:5];
button.titleEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 0);
[button addTarget:self action:@selector(didSelectButtonClick:) forControlEvents:UIControlEventTouchUpInside];
[self.mainScroll addSubview:button];
}
}
小圓點(diǎn)點(diǎn)擊放大動(dòng)畫(huà)采用核心動(dòng)畫(huà)scale
D4D0D9FE-58AD-481D-84D4-F5231A1DBDCD.png
- (void)didSelectButtonClick:(UIButton *)sender{
for (id emptyObj in self.mainScroll.subviews) {
if ([emptyObj isKindOfClass:[UIButton class]]) {
UIButton * btn = (UIButton *)emptyObj;
// btn.bounds = CGRectMake(0, 0, 5, 5);
// [btn setTitleColor:[UIColor clearColor] forState:UIControlStateNormal];
[btn.layer removeAllAnimations];
}
}
[self doScaleAnimationWithView:sender];
NSLog(@"%@",[self.LineChartDataArray[sender.tag-GAP] stringValue]);
[sender setTitle:[self.LineChartDataArray[sender.tag-GAP] stringValue] forState:UIControlStateNormal];
[sender setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
sender.titleLabel.font = [UIFont systemFontOfSize:5];
}
- (void)doScaleAnimationWithView:(UIView *)view{
CAKeyframeAnimation * animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
animation.duration = 0.3;
animation.values = @[@2,@1.5,@0.8,@1,@2];
animation.repeatCount = 2;
animation.fillMode = kCAFillModeForwards;
animation.removedOnCompletion = NO;
[view.layer addAnimation:animation forKey:@"scaleAnimations"];
}
底部X坐標(biāo)軸數(shù)據(jù)填充
7683165E-2EBF-4946-9B48-773E5C67F5EB.png
// 底部X視圖
- (void)setLineChartXLabelArray:(NSArray *)lineChartXLabelArray{
_lineChartXLabelArray = lineChartXLabelArray;
if (!_lineChartXLabelArray) return;
_pointXArray = [[NSMutableArray alloc]init];
// CGFloat labelWidthScale = (self.frame.size.width-leftXMarginScale-rightXMarginScale)/_lineChartXLabelArray.count;
self.totalWidth =0;
for (int idx = 0; idx < _lineChartXLabelArray.count; idx ++) {
CGFloat labelWidthScale = [self getLabelWidthWithText:_lineChartXLabelArray[idx]];
CGFloat x = self.totalWidth+marginScale;
CGFloat y = self.frame.size.height- lineChartXlabelHeight;
UILabel * label = [[UILabel alloc]init];
label.frame = CGRectMake(x, y, labelWidthScale, lineChartXlabelHeight);
label.text = _lineChartXLabelArray[idx];
label.textAlignment = NSTextAlignmentCenter;
label.textColor = [UIColor redColor];
label.font = [UIFont systemFontOfSize:fontSize];
[_pointXArray addObject:[NSString stringWithFormat:@"%.f",label.center.x]];
[self.mainScroll addSubview:label];
self.totalWidth = label.frame.origin.x+label.frame.size.width;
[self.mainScroll setContentSize:CGSizeMake(CGRectGetMaxX(label.frame), 0)];
}
}
再看下調(diào)用示例比較簡(jiǎn)單
- (NXLineChartView * )chartView{
if (!_chartView) {
_chartView = [[NXLineChartView alloc]init];
_chartView.backgroundColor = [UIColor whiteColor];
_chartView.center = CGPointMake([UIScreen mainScreen].bounds.size.width/2, [UIScreen mainScreen].bounds.size.height/2);
_chartView.bounds = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width-100, 200);
_chartView.lineChartXLabelArray = @[@"魅族",@"華為",@"中興",@"小米",@"蘋(píng)果",@"一加",@"樂(lè)視",@"音樂(lè)",@"電視",@"體育"];
_chartView.lineChartYLabelArray = @[];
_chartView.LineChartDataArray = @[@100,@40,@60,@45,@100,@55,@33,@120,@40,@100];
}
return _chartView;
}
