前面几篇文章是《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,欢迎话痨的加入。有技术可以互相交流。