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的空心外圈颜色为红色的空心圆了

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

转载请标注来源：https://www.cnblogs.com/qqcc1388/

巴特西

iOS 图表工具charts之LineChartView

最新文章

热门文章