iOS-charts框架之折线图详解

前面几篇文章是《charts框架的集成》《charts柱状图》《charts饼状图》，建议大家结合起来看，这样更详细。

传送门：

《charts框架之饼状图详解》

《charts框架集成详解》

《charts框架柱状图详解》

下方是折线图效果图：

主要核心代码如下，大家可以自己需要修改下方配置：

// 初始化

 _lineChartView = [[LineChartView alloc] initWithFrame:CGRectZero]; 

 [self.view addSubview:self.lineChartView];

-------------------------------折线图的配置-----------------------------------------

// 设置动画

[self.lineChartView animateWithXAxisDuration:1.0f];

[self.lineChartView animateWithYAxisDuration:1.0f];

// 设置代理   

// ChartViewDelegate,IChartAxisValueFormatter

_lineChartView.delegate = self;

// 距离边缘的间隙

 [_lineChartView setExtraOffsetsWithLeft:30 top:0 right:30 bottom:10];

// noDataText 没有数据的时候的展示

_lineChartView.noDataText = @"暂无此产品的价格趋势";

_lineChartView.noDataFont = [UIFont systemFontOfSize:15];

_lineChartView.noDataTextColor = [UIColor grayColor];

// 是否开启描述label

_lineChartView.chartDescription.enabled = YES;

//   取消XY轴缩放

 _lineChartView.scaleYEnabled = YES;

_lineChartView.scaleXEnabled = YES;

// 取消双击缩放

_lineChartView.doubleTapToZoomEnabled = NO；

// 启用拖拽

 _lineChartView.dragEnabled = YES;

// 拖拽后是否有惯性效果

_lineChartView.dragDecelerationEnabled = YES;

// 是否显示图例

_lineChartView.legend.enabled = YES; 

// 拖拽后惯性效果的摩擦系数(0~1)，数值越小，惯性越不明显

_lineChartView.dragDecelerationFrictionCoef = 0.9; 

------------------ Y轴设置----------------

// 是否绘制右边轴

 _lineChartView.rightAxis.enabled = NO;

// 获取左边Y轴

ChartYAxis *leftAxis = _lineChartView.leftAxis; 

// Y轴label数量，数值不一定，如果forceLabelsEnabled等于YES, 则强制绘制制定数量的label, 但是可能不平均

leftAxis.labelCount=6; 

// 是否强制绘制指定数量的labe

leftAxis.forceLabelsEnabled = YES; 

// 设置y轴线宽

leftAxis.axisLineWidth=0.6;  

//  设置y轴颜色

leftAxis.axisLineColor= [UIColorcolorWithRed:153/255.fgreen:153/255.fblue:153/255.falpha:1];  

// 设置Y轴的最小最大值

leftAxis.axisMaximum=105;

leftAxis.axisMinimum=0;

// 是否将Y轴进行上下翻转

leftAxis.inverted=NO;

// label位置（像里像外 枚举类型）

leftAxis.labelPosition = 0; 

// Y轴label文字颜色

leftAxis.labelTextColor= [UIColorgrayColor];

// Y轴label字体

leftAxis.labelFont = [UIFont fontWithName:@"SimSun" size:10.0f]; 

// 设置虚线样式的网格线

 leftAxis.gridLineDashLengths = @[@3.0f, @3.0f];

// 网格线颜色

leftAxis.gridColor = [UIColor colorWithRed:153/255.f green:153/255.f blue:153/255.f alpha:1];

// 开启抗锯齿

leftAxis.gridAntialiasEnabled = YES;

// 从0开始绘画

leftAxis.drawZeroLineEnabled = YES;

-------------------------配置Z轴（右边）----------------

// 获取右边Z轴

 ChartYAxis *rightAxis = _lineChartView.rightAxis;

/*具体用法参照Y轴*/

------------------------配置X轴------------------------

// 获取X轴

ChartXAxis *xAxis = _lineChartView.xAxis;

/*具体用法参照Y轴*/

----------------------配置图例----------------------

请参考我写的《charts框架之饼状图详解》

----------------------配置折现图上面的浮层--------------

// 设置浮层

_lineChartView.drawMarkers = YES;

ChartMarkerView * makerView = [[ChartMarkerView alloc]init];

makerView.offset = CGPointMake(-self.subPriceView.frame.size.width,-self.subPriceView.frame.size.height/2);

makerView.chartView = _lineChartView;

_lineChartView.marker = makerView;

[makerView addSubview:self.subPriceView];

---------------------------设置折线对象的属性-------------------

// 初始化折线对象

LineChartDataSet *lineSet = [[LineChartDataSet alloc] initWithValues:yVals label:@""];

// 设置折线对象的类型（枚举）

 lineSet.mode=4;

// 折线上的数值的颜色

lineSet.valueColors=@[[UIColorgrayColor]];

// 折线本身的颜色

[lineSetsetColor:[UIColorredColor]];  

// 折线图上是否带圆

lineSet.drawCirclesEnabled = NO;

// 是否填充颜色

lineSet.drawFilledEnabled = NO;

// 圆的半径

lineSet.circleRadius=1.0f;

// 是否画空心圆

lineSet.drawCircleHoleEnabled = YES;

// 空心圆的半径

lineSet.circleHoleRadius = 1.5;

// 空心圆的颜色

lineSet.circleHoleColor = [UIColor whiteColor];

// 拐点颜色

[lineSetsetCircleColor:[UIColorredColor]];

// 是否绘制拐点

lineSet.drawCirclesEnabled = YES;

-------------------------------十字线的配置-----------------------------

// 选中拐点,是否开启高亮效果(显示十字线)

lineSet.highlightEnabled = YES;

// 点击选中拐点的十字线的颜色

lineSet.highlightColor= [UIColorblueColor];  

// 十字线宽度

lineSet.highlightLineWidth = 0.5; 

// 设置十字线的虚线宽度

lineSet.highlightLineDashLengths = @[@5,@5]; 

---------------------------------设置数据----------------------------

 LineChartData*lineData = [[LineChartData alloc]initWithDataSet:lineSet];

priceTrendDataSource= priceTrendDataSource;

[self.lineChartView setData: LineChartData*lineData = [[LineChartDataalloc]initWithDataSet:lineSet]];

------------------------------多条折线-----------------------------------

NSMutableArray *dataSets = [[NSMutableArray alloc] init];

[dataSetsaddObject:lineSet];

[dataSetsaddObject:lineSet2];

LineChartData*data = [[LineChartDataalloc]initWithDataSets:dataSets];

self.lineChartView.data =data;

 [self.lineChartView notifyDataSetChanged];

 [self.lineChartView.data notifyDataChanged];

想要demo可以加群QQ群：191409807，欢迎话痨的加入。有技术可以互相交流。