折线图view的初始化
//初始化
LineChartView *chartView = [[LineChartView alloc] initWithFrame:chartViewFrame];
//初始化折线图
[self initChartViewProperty];
折线图的相关设置
[chartView setDelegate:self]; //设置代理
[chartView.chartDescription setEnabled:NO];
[chartView setDragEnabled:NO]; //是否可以拖动
[chartView setScaleEnabled:NO]; //放大缩小
[chartView setDrawGridBackgroundEnabled:NO];
折线相关的属性
ChartLegend *legend = chartView.legend;
legend.form = ChartLegendFormLine; //显示的是线
legend.font = [UIFont fontWithName:@"HelveticaNeue-Light" size:11.f];
legend.textColor = [UIColor grayColor]; //文字颜色
legend.horizontalAlignment = ChartLegendHorizontalAlignmentRight; //靠右显示
legend.verticalAlignment = ChartLegendVerticalAlignmentBottom; //底部显示
legend.orientation = ChartLegendOrientationHorizontal; //水平方向
legend.drawInside = NO; //放在图里还是外
轴的属性-x轴
ChartXAxis *xAxis = chartView.xAxis;
xAxis.labelFont = [UIFont systemFontOfSize:11.f];
xAxis.labelTextColor = UIColor.whiteColor;
//控制x轴坐标的文字属性
xAxis.labelTextColor = [UIColor grayColor];
xAxis.drawGridLinesEnabled = NO;
xAxis.drawAxisLineEnabled = NO;
xAxis.granularity = 1;
xAxis.valueFormatter = self;
//避免x轴的文字显示不全
xAxis.avoidFirstLastClippingEnabled = YES;
[xAxis setLabelPosition:XAxisLabelPositionBottom]; //一般把x轴放在底部
轴的属性-左边的轴
ChartYAxis *leftAxis = chartView.leftAxis;
轴的属性-右边的轴
ChartYAxis *rightAxis = chartView.rightAxis;
点击折线上的折点可以弹出显示当前点值得框框
BalloonMarker *marker = [[BalloonMarker alloc]
initWithColor: [UIColor colorWithWhite:0 alpha:0.7] //框框的背景
font: [UIFont systemFontOfSize:12.0]
textColor: [UIColor whiteColor]
insets: UIEdgeInsetsMake(5.0, 5.0, 20.0, 5.0)]; //值在框框里面的内边距
marker.chartView = chartView; //指向的图表view
marker.minimumSize = CGSizeMake(30.f, 30.f); //框框最小多大,数值变大,框框会自动变大
chartView.marker = marker;
准备数据
//将所有的数据放在数组中,要显示几条折线,准备几个数组
NSMutableArray *yVals1 = [[NSMutableArray alloc] init];
NSMutableArray *yVals2 = [[NSMutableArray alloc] init];
NSMutableArray *yVals3 = [[NSMutableArray alloc] init];
//对于每个x轴对应的点,添加相应的数据
for (int i = 0; i < count; i++)
{
double val = [costArray[i] doubleValue];
[yVals1 addObject:[[ChartDataEntry alloc] initWithX:i y:val]]; //对应加入数据
}
设置数据集
//三个数据集
LineChartDataSet *set1 = nil, *set2 = nil, *set3 = nil;
if (chartView.data.dataSetCount > 0)
{
//数据集已经绑定过了,就直接为数据集设置数据
set1 = (LineChartDataSet *)chartView.data.dataSets[0];
set2 = (LineChartDataSet *)chartView.data.dataSets[1];
set3 = (LineChartDataSet *)chartView.data.dataSets[2];
set1.values = yVals1;
set2.values = yVals2;
set3.values = yVals3;
[chartView.data notifyDataChanged];
[chartView notifyDataSetChanged];
}
else
{
//没有,则初始化数据集
set1 = [[LineChartDataSet alloc] initWithValues:yVals1 label:@"支出"]; //第一套数据的数据和代表的值
set1.axisDependency = AxisDependencyRight; //数据依赖的是右边的轴
[set1 setColor:[UIColor colorWithRed:52/255.f green:188/255.f blue:248/255.f alpha:1.f]]; //线的颜色
[set1 setCircleColor:[UIColor lightGrayColor]]; //折点的颜色
set1.lineWidth = 2.0; //线宽
set1.circleRadius = 3.0; //折点半径
set1.fillAlpha = 65/255.0;
set1.fillColor = [UIColor colorWithRed:52/255.f green:188/255.f blue:248/255.f alpha:1.f];
//这个控制的是,点击某个点之后的十字线的颜色,这里我不需要十字线
// set1.highlightColor = [UIColor blueColor];
//去掉highlightColor的颜色,但还是有默认颜色,我只能将线宽设置为0
set1.highlightLineWidth = 0; //这个控制的是,点击某个点之后的十字线的颜色,这里我不需要十字线(去掉highlightColor的颜色,但还是有默认颜色,我只能将线宽设置为0)
set1.drawCircleHoleEnabled = YES; //是否可以空心
set1.circleHoleRadius = 2.0; //设置折点空心圆角
[set1 setDrawValuesEnabled:YES];
//其他连个set是一样的设置
}
绑定数据集
NSMutableArray *dataSets = [[NSMutableArray alloc] init];
[dataSets addObject:set1];
[dataSets addObject:set2];
[dataSets addObject:set3];
LineChartData *data = [[LineChartData alloc] initWithDataSets:dataSets];
//这里的颜色控制的是每个折点的颜色
[data setValueTextColor:UIColor.whiteColor];
[data setValueFont:[UIFont systemFontOfSize:9.f]];
//每个这点上是否显示数值(我这里不显示)
[data setDrawValues:NO];
chartView.data = data;
改变x轴下面显示的内容,如下,
pragma mark - IChartAxisValueFormatter
- (NSString * _Nonnull)stringForValue:(double)value axis:(ChartAxisBase * _Nullable)axis {
//value从0开始,我要从1开始
return [NSString stringWithFormat:@"%d月",(int)value + 1];
}
点击折点maker会向下挤的问题
1.计算你数据中的最大值和最小值
2.然后设置折线view的最大值和最小值
chartView.rightAxis.axisMaximum = ABS(max_y - min_x) * 1/3.0 + max_y;
chartView.rightAxis.axisMinimum = min_x;
嗯,就是这样了。