關于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 AxisChartXAxis *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是自定義的UIMaskView *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的數量，則需要通過以下方法設置

//最多顯示的點數 默認為6leftAxis.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的空心外圈顏色為紅色的空心圓了

其他：暫時只想到這些，后續遇到了還會陸續添加

轉載請標注來源：https://www.cnblogs.com/qqcc1388/

轉載于:https://www.cnblogs.com/qqcc1388/p/11169523.html

總結

以上是生活随笔為你收集整理的iOS 图表工具charts之LineChartView的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。