Chart框架的使用——折线图

三条折线图

折线图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;

嗯，就是这样了。