iOS 는 Charts 프레임 워 크 를 사용 하여 접 는 선 그림 을 그립 니 다.
접선 도
1.접 는 선 그림 대상 초기 화
접 는 선 그림 을 만 드 는 데 사용 되 는 종 류 는 LineChartView.h 입 니 다.코드 는 다음 과 같 습 니 다.
self.LineChartView = [[LineChartView alloc] init];
self.LineChartView.delegate = self;//
[self.view addSubview:self.LineChartView];
[self.LineChartView mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(self.view.bounds.size.width-20, 300));
make.center.mas_equalTo(self.view);
}];
self.LineChartView.backgroundColor = [UIColor colorWithRed:230/255.0f green:253/255.0f blue:253/255.0f alpha:1];
self.LineChartView.noDataText = @" ";1.대화 식 설정
self.LineChartView.scaleYEnabled = NO;// Y
self.LineChartView.doubleTapToZoomEnabled = NO;//
self.LineChartView.dragEnabled = YES;//
self.LineChartView.dragDecelerationEnabled = YES;//
self.LineChartView.dragDecelerationFrictionCoef = 0.9;// (0~1)， ，
ChartXAxis *xAxis = self.LineChartView.xAxis;
xAxis.axisLineWidth = 1.0/[UIScreen mainScreen].scale;// X
xAxis.labelPosition = XAxisLabelPositionBottom;//X ，
xAxis.drawGridLinesEnabled = NO;//
xAxis.spaceBetweenLabels = 4;// label
xAxis.labelTextColor = [self colorWithHexString:@"#057748"];//label
self.LineChartView.rightAxis.enabled = NO;//
ChartYAxis *leftAxis = self.LineChartView.leftAxis;// Y
leftAxis.labelCount = 5;//Y label ， ， forceLabelsEnabled YES, label,
leftAxis.forceLabelsEnabled = NO;// label
leftAxis.showOnlyMinMaxEnabled = NO;//
leftAxis.axisMinValue = 0;// Y
leftAxis.startAtZeroEnabled = YES;// 0
leftAxis.axisMaxValue = 105;// Y
leftAxis.inverted = NO;// Y
leftAxis.axisLineWidth = 1.0/[UIScreen mainScreen].scale;//Y
leftAxis.axisLineColor = [UIColor blackColor];//Y
leftAxis.valueFormatter = [[NSNumberFormatter alloc] init];//
leftAxis.valueFormatter.positiveSuffix = @" $";//
leftAxis.labelPosition = YAxisLabelPositionOutsideChart;//label
leftAxis.labelTextColor = [self colorWithHexString:@"#057748"];//
leftAxis.labelFont = [UIFont systemFontOfSize:10.0f];// 주로 Y 축의 격자 선 스타일 을 설정 합 니 다.코드 는 다음 과 같 습 니 다.
leftAxis.gridLineDashLengths = @[@3.0f, @3.0f];//
leftAxis.gridColor = [UIColor colorWithRed:200/255.0f green:200/255.0f blue:200/255.0f alpha:1];//
leftAxis.gridAntialiasEnabled = YES;// 제한 선 은 여러 개 를 추가 할 수 있 습 니 다.여기 서 하나의 프 리 젠 테 이 션 만 추가 할 수 있 습 니 다.코드 는 다음 과 같 습 니 다.
ChartLimitLine *limitLine = [[ChartLimitLine alloc] initWithLimit:80 label:@" "];
limitLine.lineWidth = 2;
limitLine.lineColor = [UIColor greenColor];
limitLine.lineDashLengths = @[@5.0f, @5.0f];//
limitLine.labelPosition = ChartLimitLabelPositionRightTop;//
limitLine.valueTextColor = [self colorWithHexString:@"#057748"];//label
limitLine.valueFont = [UIFont systemFontOfSize:12];//label
[leftAxis addLimitLine:limitLine];// Y
leftAxis.drawLimitLinesBehindDataEnabled = YES;// 여러 개의 접 는 선 이 도표 에 나타 날 때 보통 하나의'그림'으로 모든 접 는 선의 이름 이나 대표 적 인 의 미 를 설명 해 야 한다.이 럴 때 그림 의 설정 을 해 야 한다.주요 코드 는 다음 과 같다.
[self.LineChartView setDescriptionText:@" "];//
[self.LineChartView setDescriptionTextColor:[UIColor darkGrayColor]];
self.LineChartView.legend.form = ChartLegendFormLine;//
self.LineChartView.legend.formSize = 30;//
self.LineChartView.legend.textColor = [UIColor darkGrayColor];// 3.접선 도 에 데 이 터 를 제공 합 니 다.
접선 도 에 데 이 터 를 제공 합 니 다.기둥 그림와 차이 가 많 지 않 습 니 다.유일 하 게 다른 것 은 접선 도 를 설정 하 는 접선 스타일 입 니 다.라인 스타일 을 설정 할 때 우 리 는 접선 의 유형 을 설정 할 수 있 습 니 다.계단 유형 과 일반 유형 이 있 습 니 다.우 리 는 접선 전환점 의 스타일,전환점 의 크기,전환점 이 중 공 유형 일 수 있 는 지 등 도 설정 할 수 있 습 니 다.또한 접선 도 에 색 채 를 채 울 수 있 습 니 다.이 를 통 해 도 표를 미화 합 니 다.양식 이 너무 많 기 때문에 여기 서 는 더 이상 말 하지 않 고 코드 를 직접 봅 니 다.
- (LineChartData *)setData{
int xVals_count = 12;//X
double maxYVal = 100;//Y
//X
NSMutableArray *xVals = [[NSMutableArray alloc] init];
for (int i = 0; i < xVals_count; i++) {
[xVals addObject:[NSString stringWithFormat:@"%d ", i+1]];
}
// Y
NSMutableArray *yVals = [[NSMutableArray alloc] init];
for (int i = 0; i < xVals_count; i++) {
double mult = maxYVal + 1;
double val = (double)(arc4random_uniform(mult));
ChartDataEntry *entry = [[ChartDataEntry alloc] initWithValue:val xIndex:i];
[yVals addObject:entry];
}
LineChartDataSet *set1 = nil;
if (self.LineChartView.data.dataSetCount > 0) {
LineChartData *data = (LineChartData *)self.LineChartView.data;
set1 = (LineChartDataSet *)data.dataSets[0];
set1.yVals = yVals;
return data;
}else{
// LineChartDataSet
set1 = [[LineChartDataSet alloc] initWithYVals:yVals label:@"lineName"];
//
set1.lineWidth = 1.0/[UIScreen mainScreen].scale;//
set1.drawValuesEnabled = YES;//
set1.valueColors = @[[UIColor brownColor]];//
[set1 setColor:[self colorWithHexString:@"#007FFF"]];//
set1.drawSteppedEnabled = NO;//
//
set1.drawCirclesEnabled = NO;//
set1.circleRadius = 4.0f;//
set1.circleColors = @[[UIColor redColor], [UIColor greenColor]];//
//
set1.drawCircleHoleEnabled = YES;//
set1.circleHoleRadius = 2.0f;//
set1.circleHoleColor = [UIColor blackColor];//
//
// :
// set1.drawFilledEnabled = YES;//
// set1.fillColor = [UIColor redColor];//
// set1.fillAlpha = 0.3;//
// :
set1.drawFilledEnabled = YES;//
NSArray *gradientColors = @[(id)[ChartColorTemplates colorFromString:@"#FFFFFFFF"].CGColor,
(id)[ChartColorTemplates colorFromString:@"#FF007FFF"].CGColor];
CGGradientRef gradientRef = CGGradientCreateWithColors(nil, (CFArrayRef)gradientColors, nil);
set1.fillAlpha = 0.3f;//
set1.fill = [ChartFill fillWithLinearGradient:gradientRef angle:90.0f];//
CGGradientRelease(gradientRef);// gradientRef
//
set1.highlightEnabled = YES;// , ( )
set1.highlightColor = [self colorWithHexString:@"#c83c23"];//
set1.highlightLineWidth = 1.0/[UIScreen mainScreen].scale;//
set1.highlightLineDashLengths = @[@5, @5];//
// LineChartDataSet
NSMutableArray *dataSets = [[NSMutableArray alloc] init];
[dataSets addObject:set1];
// LineChartDataSet
// LineChartDataSet *set2 = [set1 copy];
// NSMutableArray *yVals2 = [[NSMutableArray alloc] init];
// for (int i = 0; i < xVals_count; i++) {
// double mult = maxYVal + 1;
// double val = (double)(arc4random_uniform(mult));
// ChartDataEntry *entry = [[ChartDataEntry alloc] initWithValue:val xIndex:i];
// [yVals2 addObject:entry];
// }
// set2.yVals = yVals2;
// [set2 setColor:[UIColor redColor]];
// set2.drawFilledEnabled = YES;//
// set2.fillColor = [UIColor redColor];//
// set2.fillAlpha = 0.1;//
// [dataSets addObject:set2];
// LineChartData , lineChartView
LineChartData *data = [[LineChartData alloc] initWithXVals:xVals dataSets:dataSets];
[data setValueFont:[UIFont fontWithName:@"HelveticaNeue-Light" size:8.f]];//
[data setValueTextColor:[UIColor grayColor]];//
NSNumberFormatter *formatter = [[NSNumberFormatter alloc] init];
//
[formatter setNumberStyle:NSNumberFormatterDecimalStyle];
[formatter setPositiveFormat:@"#0.0"];
[data setValueFormatter:formatter];
return data;
}
}실행 결 과 는 다음 과 같 습 니 다.
실행 결과
접선 도 에 데 이 터 를 제공 하 는 데 사용 되 는 것 은 LineChartData 류 가 만 든 대상 입 니 다.LineChartData 대상 이 초기 화 될 때 dataSets 배열(안에 LineChartDataSet 대상 이 들 어 있 음)을 제공 해 야 합 니 다.위의 예 에서 dataSets 배열 에는 하나의 LineChartDataSet 대상 만 있 습 니 다.즉,하나의 접선 만 있 습 니 다.저 희 는 dataSets 배열 에 여러 개의 LineChartDataSet 대상 을 넣 을 수 있 습 니 다.즉,여러 개의 곡선 이다.아래 의 결 과 는 두 개의 접 는 선 을 추가 하 는 효과 이다.다음 과 같다.
여러 개의 접 는 선의 접 는 선 그림.
데모 다운로드 주소:http://xiazai.jb51.net/201612/yuanma/LineChartDemo-master_jb51.rar
이상 은 본 고의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.또한 저 희 를 많이 지지 해 주시 기 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
View의 레이아웃 방법을 AutoLayout에서 따뜻한 손 계산으로 하면 성능이 9.26배로 된 이야기이 기사는 의 15 일째 기사입니다. 어제는 에서 이었습니다. 손 계산을 권하는 의도는 없고, 특수한 상황하에서 계측한 내용입니다 화면 높이의 10 배 정도의 contentView가있는 UIScrollView 레이아...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
