iOS隔躲，關(guān)于畫線有很多很好的第三方摩梧，比如Charts、ECharts等等宣旱，但是我沒(méi)有找到畫不等距的仅父，就自己簡(jiǎn)單的實(shí)現(xiàn)了一下。首先看浑吟，效果
RPReplay_Final1590456433.gif
就是描點(diǎn)畫線加動(dòng)畫笙纤，實(shí)現(xiàn)了自定義雙x軸，自定義X軸组力、Y軸樣式省容，沒(méi)有太難的。
我自定義了一個(gè)LineChartView燎字，和幾個(gè)模型腥椒，具體demo下面會(huì)給鏈接
image.png
給lineChartview暴露出了幾個(gè)屬性和方法,都有注釋
image.png
在controller里面進(jìn)行初始化配置
image.png
setChartView方法
self.chartView.y_TextFont = [UIFont systemFontOfSize:14];
self.chartView.minValue = 0;
self.chartView.maxValue = 100;
NSArray *x_names = @[@"清醒",@"一般",@"黃金"];
NSArray *xValue = @[@0,@50,@100];
NSArray *x_colors = @[[UIColor redColor],[UIColor orangeColor],[UIColor yellowColor]];
NSMutableArray *xAxis = [NSMutableArray new];
for (int i = 0; i < x_names.count; i++) {
XJYAxisModel * model = [XJYAxisModel new];
model.clolor = x_colors[I];
model.value = xValue[I];
model.title = x_names[I];
[xAxis addObject:model];
}
[self.chartView drawLineChartViewWithX_Value_Names:xAxis xCount:xCount];
我在controller里面定義了個(gè)方法setXAxis，用于設(shè)置x軸線上的模型具體實(shí)現(xiàn)
- (NSArray *)setXAxis{
// 最大值和最小值 -> 每個(gè)軸線上的值 候衍， 比如最大值90笼蛛，最小值是0，10條軸線(9個(gè)間隙)蛉鹿，則每條軸線的間距是10(0滨砍、10、20妖异、30惋戏、40、50随闺、60日川、70、80矩乐、90)
float min = 0;
float max = 90;
float space = (max - min)/(xCount - 1);
NSMutableArray *xAxisArr = [NSMutableArray new];
for (int i = 0 ; i < xCount; i++) {
XJXAxisModel *model = [XJXAxisModel new];
model.value = [NSNumber numberWithFloat: i * space];
model.title = [NSString stringWithFormat:@"12:0%d",I];
model.clolor = [UIColor whiteColor];
model.textFont = [UIFont systemFontOfSize:10];
[xAxisArr addObject:model];
}
return xAxisArr;
}
頁(yè)面上弄了一個(gè)按鈕龄句，用于觸發(fā)賦值回论，
- (void)refreshData{
static int a = 0;
if (a == 0) {
NSMutableArray *datas = [NSMutableArray new];
NSArray *valueXs = @[@0,@5,@11,@19,@25,@31,@39,@43,@51,@59,@70,@85,@90];
NSArray *valueYs = @[@0,@10,@55,@99,@88,@99,@77,@87,@10,@53,@80,@10,@0];
for (int i = 0; i < valueXs.count; i++) {
XJDataModel *model = [XJDataModel new];
model.xValue = valueXs[I];
model.yValue = valueYs[I];
[datas addObject:model];
}
[self.chartView drawLineChartViewWithDataModels:datas withXAxisData:[self setXAxis]];
a = 1;
}else{
NSMutableArray *datas = [NSMutableArray new];
NSArray *valueXs = @[@0,@5,@11,@19,@25,@31,@39,@43,@51,@59,@70,@85,@90];
NSArray *valueYs = @[@0,@90,@55,@9,@88,@19,@77,@87,@10,@93,@80,@10,@0];
for (int i = 0; i < valueXs.count; i++) {
XJDataModel *model = [XJDataModel new];
model.xValue = valueXs[I];
model.yValue = valueYs[I];
[datas addObject:model];
}
[self.chartView drawLineChartViewWithDataModels:datas withXAxisData:[self setXAxis]];
a = 0;
}
}
在畫線的具體實(shí)現(xiàn)里面，先賦值x軸文案分歇，然后描點(diǎn)畫線并設(shè)置動(dòng)畫效果
- (void)drawLineChartViewWithDataModels:(NSArray<XJDataModel *> *)datas withXAxisData:(NSArray< XJXAxisModel * >*)xAxis{
[self reset];
// 1. 設(shè)置x軸文案
[self setXAxisData:xAxis];
if (datas.count == 0) {
return;
}
// [shapeLayer removeFromSuperlayer];
//2.獲取目標(biāo)值點(diǎn)坐標(biāo)
NSMutableArray *allPoints = [NSMutableArray array];
for (int i = 0; i < datas.count; i++) {
XJDataModel *model = [datas objectAtIndex:i];
float Y = y_start - scaleY * model.yValue.floatValue;
float X = x_start + scaleX * model.xValue.floatValue;
NSLog(@"X,Y = (%.2f,%.2f)",X,Y);
CGPoint point = CGPointMake(X, Y);
[allPoints addObject:[NSValue valueWithCGPoint:point]];
}
// 畫線
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:[allPoints[0] CGPointValue]];
CGPoint PrePonit;
for (int i =0; i<allPoints.count; i++) {
if (i==0) {
PrePonit = [allPoints[0] CGPointValue];
}else{
CGPoint NowPoint = [allPoints[i] CGPointValue];
[path addCurveToPoint:NowPoint controlPoint1:CGPointMake((PrePonit.x+NowPoint.x)/2, PrePonit.y) controlPoint2:CGPointMake((PrePonit.x+NowPoint.x)/2, NowPoint.y)]; //三次曲線
PrePonit = NowPoint;
}
}
shapeLayer = [CAShapeLayer layer];
shapeLayer.path = path.CGPath;
shapeLayer.lineWidth = 2.0;
shapeLayer.strokeColor = [UIColor orangeColor].CGColor;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.borderWidth = 3.0;
[self.subviews[0].layer addSublayer:shapeLayer];
// 加動(dòng)畫
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.duration = 1.0;
animation.fromValue = @0.0f;
animation.toValue = @1.0f;
[shapeLayer addAnimation:animation forKey:@"strokeEnd"];
for (int i = 0; i < datas.count; i++) {
CGPoint point =[allPoints[i] CGPointValue];
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(point.x-2.5, point.y-2.5, 5, 5) cornerRadius:5];
CAShapeLayer *layer = [CAShapeLayer layer];
layer.strokeColor = [UIColor whiteColor].CGColor;
layer.fillColor = [UIColor whiteColor].CGColor;
layer.path = path.CGPath;
[self.subviews[0].layer addSublayer:layer];
[pointShapeLayers addObject:layer];
}
}
簡(jiǎn)單介紹到這里傀蓉，demo
