首页 > 代码库 > 常见绘图框架-(Charts)

常见绘图框架-(Charts)

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 很高,并且这个还有安卓版,坑的地方就是是看安卓使用文档,不过还是很容易看懂的,字面意思差不多。

 

<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #000000 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #703daa } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #000000; min-height: 16.0px } p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #3e1e81 } p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #008400 } span.s1 { } span.s2 { color: #4f8187 } span.s3 { color: #703daa } span.s4 { color: #3e1e81 } span.s5 { color: #272ad8 } span.s6 { color: #ba2da2 } span.s7 { color: #000000 } span.s8 { color: #008400 } span.s9 { font: 14.0px "PingFang SC"; color: #008400 }</style>

        _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];

 

<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #008400 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #703daa } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #000000 } p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #d12f1b } p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #3e1e81 } p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #000000; min-height: 16.0px } p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #4f8187 } span.s1 { color: #000000 } span.s2 { } span.s3 { font: 14.0px "PingFang SC" } span.s4 { color: #4f8187 } span.s5 { color: #703daa } span.s6 { color: #3e1e81 } span.s7 { color: #008400 } span.s8 { font: 14.0px "PingFang SC"; color: #008400 } span.s9 { color: #272ad8 } span.s10 { color: #ba2da2 } span.s11 { color: #31595d } span.s12 { color: #d12f1b }</style>

  //设置图例

        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;

    

<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "PingFang SC"; color: #008400 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #000000 } span.s1 { font: 14.0px Menlo; color: #000000 } span.s2 { font: 14.0px Menlo } span.s3 { } span.s4 { color: #703daa } span.s5 { color: #4f8187 } span.s6 { color: #31595d } span.s7 { color: #d12f1b } span.s8 { color: #008400 } span.s9 { color: #272ad8 } span.s10 { color: #ba2da2 } span.s11 { font: 14.0px "PingFang SC"; color: #008400 } span.s12 { color: #3e1e81 }</style>

      //左侧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轴表格颜色值

      

<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #008400 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #000000 } span.s1 { color: #000000 } span.s2 { } span.s3 { font: 14.0px "PingFang SC" } span.s4 { color: #703daa } span.s5 { color: #4f8187 } span.s6 { color: #272ad8 } span.s7 { color: #ba2da2 }</style>

     //右侧Y轴属性设置

        ChartYAxis *rightAxis = _chartView.rightAxis;

        rightAxis.axisMaximum = 0 ;

        rightAxis.axisMinimum = 0 ;

        rightAxis.drawAxisLineEnabled = NO;

 

  

<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #008400 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #000000 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #4f8187 } p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #000000; min-height: 16.0px } span.s1 { color: #000000 } span.s2 { } span.s3 { font: 14.0px "PingFang SC" } span.s4 { color: #4f8187 } span.s5 { color: #703daa } span.s6 { color: #3e1e81 } span.s7 { color: #272ad8 } span.s8 { color: #31595d } span.s9 { color: #d12f1b }</style>

     //继承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上历史视图

<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #000000 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #000000; min-height: 16.0px } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #3e1e81 } p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #4f8187 } span.s1 { } span.s2 { color: #ba2da2 } span.s3 { color: #31595d } span.s4 { color: #703daa } span.s5 { color: #000000 } span.s6 { color: #4f8187 } span.s7 { color: #272ad8 } span.s8 { color: #3e1e81 }</style>

[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

<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #1337ff } span.s1 { }</style> <style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #3e1e81 } span.s1 { }</style> <style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #000000 } span.s1 { }</style>

常见绘图框架-(Charts)