美文网首页三方管理实用工具ios实用开发技巧
PNChart:一个简洁高效的iOS图表库

PNChart:一个简洁高效的iOS图表库

作者: 码渣 | 来源:发表于2017-02-22 10:13 被阅读3629次

    1.要求

    PNChart 依赖于下列框架,在使用前请导入这些框架(ps:至于怎么导入,这里就不说了):

    • Foundation.framework
    • UIKit.framework
    • CoreGraphics.framework
    • QuartzCore.framework
      切记:这个框架依赖于第三方框架:UICountingLabel 请自行去https://github.com下载,并添加到这个框架中。

    2.使用

    2.1 折线图使用

    折线图.png
    PNLineChart * lineChart = [[PNLineChart alloc] initWithFrame:CGRectMake(0, 135.0, SCREEN_WIDTH, 200.0)];
        // 设置x轴上坐标内容
        [lineChart setXLabels:@[@"1",@"2",@"3",@"4",@"5"]];
        // 设置好像没什么用
        lineChart.xLabelColor = [UIColor orangeColor];
        
        lineChart.showLabel = YES;
        // 是否显示Y轴的数值
        lineChart.showGenYLabels = YES;
        // 是否显示横向虚线
        lineChart.showYGridLines = YES;
        // 是否平滑的曲线
        lineChart.showSmoothLines = NO;
        // 是否显示xy 坐标轴
        lineChart.showCoordinateAxis = YES;
        // 轴的颜色
        lineChart.axisColor = [UIColor orangeColor];
        // 轴的宽度
        lineChart.axisWidth = 2.0f;
        
        NSLog(@"%f",lineChart.chartMarginLeft);
        
        //    lineChart.thousandsSeparator = YES;
        // 设置y轴坐标的颜色
        lineChart.yLabelColor = [UIColor redColor];
        
        // Line Chart No.1
        NSArray * data01Array = @[@60.1, @160.1, @126.4, @262.2, @186.2];
        PNLineChartData *data01 = [PNLineChartData new];
        data01.color = PNFreshGreen;
        data01.dataTitle = @"Hello World";
        // 设置点的格式
        data01.inflexionPointStyle = PNLineChartPointStyleCircle;
        data01.inflexionPointColor = [UIColor purpleColor];
        // 是否点label
        data01.showPointLabel = YES;
        data01.pointLabelColor = [UIColor redColor];
        data01.pointLabelFont = [UIFont systemFontOfSize:12];
        data01.pointLabelFormat = @"%1.1f";
        // 设置折线有几个值
        data01.itemCount = lineChart.xLabels.count;
        data01.getData = ^(NSUInteger index) {
            CGFloat yValue = [data01Array[index] floatValue];
            
            // 设置x轴坐标对应的y轴的值
            return [PNLineChartDataItem dataItemWithY:yValue];
        };
        // Line Chart No.2
        NSArray * data02Array = @[@20.1, @180.1, @26.4, @202.2, @126.2];
        PNLineChartData *data02 = [PNLineChartData new];
        data02.color = PNTwitterColor;
        data02.itemCount = lineChart.xLabels.count;
        data02.getData = ^(NSUInteger index) {
            CGFloat yValue = [data02Array[index] floatValue];
            return [PNLineChartDataItem dataItemWithY:yValue];
        };
        // 设置line的数据数组
        lineChart.chartData = @[data01, data02];
        // 绘制出来
        [lineChart strokeChart];
        
        [self.view addSubview:lineChart];
    

    2.2 柱状图使用

    柱状图.png
    PNBarChart *barChart = [[PNBarChart alloc] initWithFrame:CGRectMake(0, 135.0, SCREEN_WIDTH, 200.0)];
        // 是否显示xy 轴的数字
        barChart.showLabel = YES;
        // 是否显示水平线 但把柱子压低上移了
        //    barChart.showLevelLine = YES;
        //是否显示xy 轴
        barChart.showChartBorder = YES;
        // 是否显示柿子的数值
        barChart.isShowNumbers = YES;
        // 立体显示
        barChart.isGradientShow = YES;
        // 设置柱子的圆角
        barChart.barRadius = 5;
        // 设置bar color
        barChart.strokeColor = [UIColor redColor];
        
        barChart.xLabels = @[@"1",@"2",@"3",@"4",@"5"];
        
        barChart.yValues = @[@"2",@"4",@"1",@"10",@"9"];
        
        barChart.yLabelFormatter = ^ (CGFloat yLabelValue) {
            
            return [NSString stringWithFormat:@"%f",yLabelValue];
        };
        
        [barChart strokeChart];
        
        [self.view addSubview:barChart];
    

    2.3 circle charet 使用

    circle Chart.png
    // 设置圆状图
        PNCircleChart *circleChart = [[PNCircleChart alloc]initWithFrame:CGRectMake(100, 50, 200, 200) total:@100 current:@10 clockwise:NO shadow:YES shadowColor:[UIColor grayColor] displayCountingLabel:YES overrideLineWidth:@15];
        
        circleChart.chartType = PNChartFormatTypePercent;
        circleChart.strokeColor = [UIColor greenColor];
        
        [circleChart strokeChart];
        
        [self.view addSubview:circleChart];
    

    2.4 饼状图使用

    饼状图.png
    NSArray *items = @[[PNPieChartDataItem dataItemWithValue:30 color:PNBrown description:@"cat"],[PNPieChartDataItem dataItemWithValue:20 color:PNDarkBlue description:@"pig"], [PNPieChartDataItem dataItemWithValue:50 color:PNGrey description:@"dog"]];
        
        PNPieChart *pieChart = [[PNPieChart alloc] initWithFrame:CGRectMake(100, 100, 200, 200) items:items];
        
        pieChart.delegate = self;
        [pieChart strokeChart];
        // 加到父视图上
        [self.view addSubview:pieChart];
        
        // 显示图例
        pieChart.hasLegend = YES;
        // 横向显示
        pieChart.legendStyle = PNLegendItemStyleSerial;
        // 显示位置
        pieChart.legendPosition = PNLegendPositionTop;
        // 获得图例 当横向排布不下另起一行
        UIView *legend = [pieChart getLegendWithMaxWidth:100];
        legend.frame = CGRectMake(100, 300, legend.bounds.size.width, legend.bounds.size.height);
        [self.view addSubview:legend];
    

    相关文章

      网友评论

      • Afunnyrainman:有办法可以让他滑动显示吗?
        简书花花:@Afunnyrainman 我去看看。3q
        Afunnyrainman:@简书花花 用了XJYChart可以滑动
        简书花花:滑动显示可以吗?
      • AbnerZhang:请问调用updateChartData 时闪退怎么回事?
      • brance:X轴不能横向移动,这~
        码渣:@Afunnyrainman 不太清楚,你查查API有没有提供相关的属性或方法
        Afunnyrainman:有办法让他可以滑动显示吗?
      • 天行哥:是否可以跨点连线,貌似所有点都是从做左侧开始的,x轴数值有7个,实际的点数只有3个,对应不同的日期,怎么做到啊
      • 虞小虞:能问一下条形图如何设置显示的number的字体大小吗?
      • 码渣:@王晓鹏友 试了你会学到很多
      • 一本大书:我以为是原作者。
      • a24df6838a47:试试看
      • bin9999:你觉得你的折线图Y轴对准了吗?
        bin9999:@belin 是没法子控制
        码渣:@Potato121 确实不好控制
        Potato121:我觉得这个折线图的Y轴不好控制

      本文标题:PNChart:一个简洁高效的iOS图表库

      本文链接:https://www.haomeiwen.com/subject/vkbpwttx.html