iOS 图表工具charts之LineChartView

关于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 Axis
    ChartXAxis *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是自定义的UI
    MaskView *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的数量，则需要通过以下方法设置

 //最多显示的点数 默认为6
    leftAxis.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的空心外圈颜色为红色的空心圆了

其他：暂时只想到这些，后续遇到了还会陆续添加