關於charts的系列視圖介紹傳送門：
iOS 圖表工具charts介紹
iOS 圖表工具charts之LineChartView
iOS 圖表工具charts之BarChartView
iOS 圖表工具charts之PieChartView
iOS 圖表工具charts之CandleStickChartView
iOS 圖表工具charts之CombinedChartView
LineChartView在charts中可以用來繪制折線,由於charts是基於swift開發的，如果需要和objective-C混編(通過pod的方式不用管)，可以參考我的上幾篇文章《iOS OC中橋接swift第三方庫》 ，這里主要講的是LineChartView的一些常用屬性和一些基本用法，實際情況以開發為准
lineChartView的一些屬性介紹：
LineChartView *chartView = [[LineChartView alloc] init];
//設置間隙
[chartView setExtraOffsetsWithLeft:10 top:10 right:10 bottom:10];
//設置邊框
chartView.borderColor = [UIColor blueColor];
chartView.borderLineWidth = .5;
chartView.drawBordersEnabled = YES;
//繪制網格背景
chartView.drawGridBackgroundEnabled = NO;
chartView.gridBackgroundColor = [UIColor grayColor];
//關於圖表的描述
chartView.chartDescription.enabled = NO;
chartView.chartDescription.text = @"tiny`s charts demo";
//是否顯示圖例
chartView.legend.enabled = NO;
//沒有數據時顯示
chartView.noDataText = @"沒有數據";
//x y軸是否支持拖拽
chartView.scaleXEnabled = YES;
chartView.scaleYEnabled = NO;
//是否支持xy軸同時縮放
chartView.pinchZoomEnabled = NO;
//是否支持雙擊縮放
chartView.doubleTapToZoomEnabled = NO;
//高亮點擊
chartView.highlightPerTapEnabled = YES;
//高亮拖拽
chartView.highlightPerDragEnabled = YES;
//自動縮放
chartView.autoScaleMinMaxEnabled = YES;
//啟用拖拽
chartView.dragEnabled = YES;
//代理方法
chartView.delegate = self;
//是否支持marker功能 這里可以自定義一個點擊彈窗的marker
chartView.drawMarkers = YES;
ChartMarkerView * makerView = [[ChartMarkerView alloc]init];
makerView.chartView = chartView;
chartView.marker = makerView;
lineChartView可以設置坐標軸的屬性 leftAxis,rightAxis,xAxis
ChartYAxis *leftAxis = chartView.leftAxis;
//是否使能left坐標軸
leftAxis.enabled = YES;
//坐標值在外部還是內部
leftAxis.labelPosition = YAxisLabelPositionInsideChart;
//最多顯示的點數 默認為6
leftAxis.labelCount = 5;
//小數位
leftAxis.decimals = 2;
//是否要畫網格線
leftAxis.drawGridLinesEnabled = YES;
//虛線相位
leftAxis.gridLineDashLengths = @[@2,@5];
//是否顯示頂部底部坐標值
leftAxis.drawTopYLabelEntryEnabled = YES;
leftAxis.drawBottomYLabelEntryEnabled = YES;
//虛線寬度
// leftAxis.gridLineWidth = 20;
//設置重復不顯示
leftAxis.granularityEnabled = YES;
leftAxis.granularity = YES;
//強制顯示指定個數 使能了這個屬性
// leftAxis.forceLabelsEnabled = YES;
//抗鋸齒功能是否打開 默認打開狀態
leftAxis.gridAntialiasEnabled = NO;
//坐標點居中
leftAxis.centerAxisLabelsEnabled = NO;
//繪制零線
// leftAxis.drawZeroLineEnabled = YES;
// leftAxis.zeroLineColor = [UIColor blueColor];
//軸線顏色 字體 線寬
leftAxis.axisLineColor = [UIColor redColor];
leftAxis.labelFont = [UIFont systemFontOfSize:10];
leftAxis.labelTextColor = [UIColor redColor];
leftAxis.axisLineWidth = 5;
// leftAxis.yOffset = -5;
//設置y軸上面顯示格式 需要注意的是自定義的LeftAxisFormatter必須遵守IChartAxisValueFormatter協議，還需要重寫-(NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis方法 具體后面會再講解
leftAxis.valueFormatter = [LeftAxisFormatter new];
//bottom Axis
ChartXAxis *bmxAxis = chartView.xAxis;
bmxAxis.enabled = YES;
bmxAxis.labelPosition = XAxisLabelPositionBottom;
bmxAxis.valueFormatter = [AxisXFormatter new];
bmxAxis.drawGridLinesEnabled = YES;
// bmxAxis.xOffset = 10;
bmxAxis.labelCount = 5;
bmxAxis.forceLabelsEnabled = YES;
bmxAxis.avoidFirstLastClippingEnabled = YES; //避免文字顯示不全 這個屬性很重要
//設置最多顯示點數
bmxAxis.axisMaximum = 40;
bmxAxis.axisMinimum = 0;
ChartDataEntry 點對象 折線上面的每個點都是一個ChartDataEntry對象
NSArray *datas = @[@30,@40,@80,@70,@20,@20,@30,@9,@19,@99,@7,@89,@67,@56,@150];
NSMutableArray *array = [NSMutableArray array];
for (int i = 0; i < datas.count; i++) {
//創建ChartDataEntry對象並將每個點對應的值與x軸 y軸進行綁定
ChartDataEntry *entry = [[ChartDataEntry alloc] initWithX:i y:[datas[i] integerValue]];
[array addObject:entry];
}
LineChartDataSet 線 所有ChartDataEntry集合在一起就形成了線,LineChartDataSet的屬性很多比如顏色，粗細，線寬，虛線，是否實現圓圈等等
//創建一個集合並為這個集合賦值 label的值可為空
LineChartDataSet *set = [[LineChartDataSet alloc] initWithEntries:array label:@"Line DataSet"];
//折線顏色
[set setColor:[UIColor grayColor]];
set.lineWidth = .5;
//這里模式可以用來設置線條的類型：比如折線，平滑曲線等
set.mode = LineChartModeLinear;
//使能小圓圈 默認使能 通過圓圈和Hole可以畫出空心圓的效果，這個在k線指標DKBY圖中會用到的
set.drawCirclesEnabled = NO;
//圓圈半徑
set.circleRadius = 2.5;
//圓圈顏色
set.circleColors = @[UIColor.redColor];
//使能圓圈孔
set.drawCircleHoleEnabled = YES;
//圓圈孔中心顏色
set.circleHoleColor = [UIColor clearColor];
//圓孔孔中心半徑 這個半徑要比圓圈半徑小才可以看到空心圓效果
set.circleHoleRadius = 2.f;
set.lineDashPhase = .5f;
set.lineDashLengths = @[@.5f];
set.axisDependency = AxisDependencyRight;
// set.lineCapType = kCGLineCapRound;
//使能填充 填充效果可以達到股票交易軟件中分時圖的效果
set.drawFilledEnabled = NO;
set.drawValuesEnabled = NO;
//取消高亮點擊，如果設置為NO則線上所有點將無法點擊 這個屬性設置一定要注意
// set.highlightEnabled = NO;
//取消橫向縱向輔助線
// set.drawHorizontalHighlightIndicatorEnabled = NO;
// set.drawVerticalHighlightIndicatorEnabled = NO;
//設置填充顏色
// set.fillColor = [UIColor redColor];
LineChartData 數據容器 將前面准備的set添加到容器中，這樣圖表就可以顯示出來了
//創建容器
LineChartData *chartData = [[LineChartData alloc] initWithDataSet:set];
//將數據添加到圖中 注意這里可以是多條線 [chartData addDataSet:set]
self.chartView.data = chartData;
delegate chartView是有代理的
#pragma mark 圖表中數值被選中
-(void)chartValueSelected:(ChartViewBase *)chartView entry:(ChartDataEntry *)entry highlight:(ChartHighlight *)highlight{
// NSLog(@"圖表中數值被選中");
[self.maskView updateMaskValue:entry.y];
}
#pragma mark 圖表中的空白區域被選中
-(void)chartValueNothingSelected:(ChartViewBase *)chartView{
// NSLog(@"空白區域被選中");
}
#pragma mark 圖表被縮放
-(void)chartScaled:(ChartViewBase *)chartView scaleX:(CGFloat)scaleX scaleY:(CGFloat)scaleY{
// NSLog(@"圖表被縮放");
}
#pragma mark 圖表被移動
-(void)chartTranslated:(ChartViewBase *)chartView dX:(CGFloat)dX dY:(CGFloat)dY{
// NSLog(@"圖表被移動");
}
在我的項目中lineChartView主要用來繪制分時圖和一些指標圖形，所有這里就截了幾個圖以供參考
//分時圖
//指標
//指標
//點擊可以彈出浮層的效果
可能遇到的坑
1.輔助線 默認是有輔助線的(也就是十字線)，如果不需要可以設置
set.drawHorizontalHighlightIndicatorEnabled = NO;
set.drawVerticalHighlightIndicatorEnabled = NO;
2.折線上面的點無法點擊,如果設置了set.highlightEnabled = NO,將無法點擊
3.設置點擊浮層，每個點點擊如果需要有浮層彈出，其實是可以自定義mask的，設置方法：
//是否支持marker功能
chartView.drawMarkers = YES;
ChartMarkerView * makerView = [[ChartMarkerView alloc]init];
makerView.chartView = chartView;
chartView.marker = makerView;
//maskView是自定義的UI
MaskView *masker = [[MaskView alloc] initWithFrame:CGRectMake(0, 0, 100, 44)];
[makerView addSubview:masker];
self.maskView = masker;
//當用戶點擊了可以在代理中監聽點擊的點，拿到點對應的值，更新maskView就可以了
-(void)chartValueSelected:(ChartViewBase *)chartView entry:(ChartDataEntry *)entry highlight:(ChartHighlight *)highlight{
[self.maskView updateMaskValue:entry.y];
}
4.坐標軸formatter的設置，需要創建一個對象，准守IChartAxisValueFormatter協議，實現-(NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis方法即可,以LeftAxisFormatter為例
//LeftAxisFormatter.h
#import <Foundation/Foundation.h>
#import <ChartsDemo-Swift.h>
NS_ASSUME_NONNULL_BEGIN
@interface LeftAxisFormatter : NSObject<IChartAxisValueFormatter>
//小數位
@property(nonatomic, assign) int digital;
@end
//LeftAxisFormatter.m
#import "LeftAxisFormatter.h"
NS_ASSUME_NONNULL_END
@implementation LeftAxisFormatter
-(NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis{
return [NSString stringWithFormat:[NSString stringWithFormat:@"%%.%if", self.digital] , value];
}
@end
5.chartView坐標軸左右上下默認都會有間隙的 可以通過以下方式清除間隙
[chartView setExtraOffsetsWithLeft:10 top:10 right:10 bottom:10];
chartView.minOffset = 0;
6.leftAxis默認會繪制6個label,如果需要改變labels的數量，則需要通過以下方法設置
//最多顯示的點數 默認為6
leftAxis.labelCount = 5;
//強制顯示指定個數 使能了這個屬性
// leftAxis.forceLabelsEnabled = YES;
7.oc中如果修改charts源碼，就需要橋接swift了，這個時候請參考我的這篇文章《iOS OC中橋接swift第三方庫》
8.發現x坐標軸數字顯示不全設置 avoidFirstLastClippingEnabled = YES即可
9.LineChartDataSet的drawCirclesEnabled可以讓每個點顯示小圓圓
10.折線上面每個點的數字無法顯示
1.設置chartView.maxVisibleCount = 100 100表示chartView最多顯示100個點值 0表示不顯示點值
2.設置set.drawValuesEnabled = YES;
set.valueColors = @[[UIColor redColor]];
set.valueFont = [UIFont systemFontOfSize:12];
11.空心圓的顯示技巧，指標上面要顯示空心圓
1.設置set.drawCirclesEnabled = YES;
2.設置圓圈半徑set.circleRadius = 2.5;
3.設置顏色set.circleColors = @[UIColor.redColor];
4.使能空心圓set.drawCircleHoleEnabled = YES
5.設置 set.circleHoleRadius = 2.f;這里半徑一定要比circle小 (很重要要不然顯示不出來)
6.設置set.circleHoleColor = [UIColor clearColor]，設置空心圓的顏色為透明
設置完以上就可以看到一個半徑為2.f的空心外圈顏色為紅色的空心圓了
其他：暫時只想到這些，后續遇到了還會陸續添加