常见绘图框架-(Charts)

Posted 2020-08-19 探出的头

swift 出来后有很多优秀的第三方绘图、动画框架,最近项目需要使用了 Charts 
Github: https://github.com/danielgindi/Charts

因为是在Object-c工程上使用，所以使用cocoapod 工具导入,省了很多麻烦

podfile:

target ‘DianLeIE’
pod ‘Charts‘, ‘~> 3.0.0‘
pod ‘Realm‘, ‘~> 2.0.2‘

use_frameworks!


在开始使用的时候遇到了一些问题，因为之前用core plote 第三绘图,很多都需要自己自定义,但是在Charts 上预留了很多自定义的方法,在使用时就不需要过多的计算,可能就是因为这个原因所以在github上star 很高,并且这个还有安卓版,坑的地方就是是看安卓使用文档,不过还是很容易看懂的，字面意思差不多。

 

        _chartView = [[LineChartView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];

        _chartView.delegate = self;

        _chartView.chartDescription.enabled = NO;

        _chartView.borderColor = [UIColor blackColor];

        _chartView.dragEnabled = YES;               //是否允许拖拽

        

        //X缩放

        [_chartView setScaleXEnabled:YES];

        //Y缩放

        [_chartView setScaleYEnabled:NO];

 

        _chartView.pinchZoomEnabled = NO;

        

        //setExtraOffsets　　设置偏移位置 这里需要调，不然影响xAxis label 与 线条上对应的位置有误差

        [_chartView setExtraOffsetsWithLeft:5.f top:0.f right:30.f bottom:0.f];

 

  //设置图例

        ChartLegend *l = _chartView.legend;

        l.form = ChartLegendFormSquare;                                     //图例样式

        l.font = [UIFont fontWithName:@"HelveticaNeue-Light" size:11.f];

        l.textColor = [UIColor blackColor];

        l.horizontalAlignment = ChartLegendHorizontalAlignmentRight;        //水平方向位置

        l.verticalAlignment = ChartLegendVerticalAlignmentBottom;           //垂直方向位置

        l.orientation = ChartLegendOrientationHorizontal;

        l.drawInside = NO;

        

        //X轴属性设置

        ChartXAxis *xAxis = _chartView.xAxis;

        xAxis.labelFont = [UIFont systemFontOfSize:11.f];

        xAxis.labelTextColor =  [UIColor hex:@"666666"];        //009b34

        xAxis.drawGridLinesEnabled = NO;

        xAxis.drawAxisLineEnabled = YES;

        _xAxisFormatter = [[DateValueFormatter alloc] init];

        xAxis.valueFormatter = self;　　　　　　　　　　　　　　　　　//自定xAxis label值样式

        xAxis.labelCount = 5;

        xAxis.labelPosition = ChartLimitLabelPositionLeftBottom;    //x轴位置

        xAxis.labelRotationAngle = -20;

　　　　

 　　　　 //左侧y轴属性设置

        ChartYAxis *leftAxis = _chartView.leftAxis;

        leftAxis.labelTextColor = [UIColor hex:@"9d9d9d"];      //9d9d9d

        leftAxis.axisMinimum = 0.0;　　　　　　　　　　　　　　　　　　//设置leftAxis label 最小值为0

        leftAxis.drawGridLinesEnabled = YES;

        leftAxis.drawZeroLineEnabled = NO;

        leftAxis.granularityEnabled = NO;

        leftAxis.drawAxisLineEnabled = NO;

        leftAxis.xOffset = 15;                              //x 位置偏移

        [leftAxis setGridColor:[UIColor hex:@"efeff4"]];    //设置y轴表格颜色值

　　　　　　

     //右侧Y轴属性设置

        ChartYAxis *rightAxis = _chartView.rightAxis;

        rightAxis.axisMaximum = 0 ;

        rightAxis.axisMinimum = 0 ;

        rightAxis.drawAxisLineEnabled = NO;

 

　　

 　　　　//继承ChartMarkerImage 自定义提示框　　这里BalloonMarker 是Charts Demo中找到了，自个加一下修改

        _marker = [[BalloonMarker alloc]

                                 initWithColor: [UIColor colorWithWhite:180/255. alpha:1.0]

                                 font: [UIFont systemFontOfSize:12.0]

                                 textColor: [UIColor hex:@"666666"]

                                 insets: UIEdgeInsetsMake(0, 0, 0, 0)];

        _marker.chartView = _chartView;

        _marker.image = [UIImage imageNamed:@"icon_marker"];

        _marker.minimumSize = CGSizeMake(80.f, 40.f);

        

        _chartView.marker = _marker;

 

　　　　//最坑的在这里，设置X轴最大显示范围 必须在设置数据 后加入,不然因为填充数据后重新计算会导致错误，并且要移除charView上历史视图

[self setDataCount:dataArry.count Data:dataArry dateArry:dateArry];

    

    [_chartView setVisibleXRangeMaximum:5.0f];

    

    [_chartView setVisibleXRangeMinimum:5.0f];

    [_chartView moveViewToX:_dateArry.count+1];



如果最开始使用建议下载Demo并且查看安卓版文档:https://github.com/PhilJay/MPandroidChart/wiki

一些常见的问题也可在这查看：https://github.com/PhilJay/MPAndroidChart/issues