iOS--PNChart学习

导语:

这是一款可以制作各种类型的图表库,折线图,柱状图,圆状图,饼状图,同时伴有动画效果,代码简洁易懂。

1.安装

推荐使用cocoapods, 即 pod "PNChart",导入头文件 #import "PNChart.h"
当然你也可以手动导入,需要添加系统依赖库:
Foundation.framework
UIKit.framework
CoreGraphics.framework
QuartzCore.framework

2.使用

1.折线图

使用的类为PNLineChart,属性比较多,以下几种类型的图,属性就不一一介绍了,可以参考着折线图

- (void)makeLineChart{
    PNLineChart *lineChart = [[PNLineChartalloc] initWithFrame:CGRectMake(0, 100, SCREEN_WIDTH, 200)];

    lineChart.yFixedValueMax =300;
    lineChart.yFixedValueMin =0;
    // lineChart.yLabelNum = 2;//设置Y轴有几个等级数值,默认自动计算
    //是否显示X轴数值
    lineChart.showLabel = YES;
    //是否显示Y轴的数值
    lineChart.showGenYLabels = YES;
    //是否显示横向曲线, Y轴网络线
    lineChart.showYGridLines = YES;
    //是否显示平滑的曲线
    lineChart.showSmoothLines = NO;
    //是否显示 xy 坐标轴
    lineChart.showCoordinateAxis = YES;
    //动画
    lineChart.displayAnimated =YES;
    //轴的颜色
    lineChart.axisColor = [UIColor blueColor];
    //轴的宽度
    lineChart.axisWidth =2.0f;
    //纵坐标上是否显示小数
    lineChart.thousandsSeparator =YES;
    //设置Y轴坐标值的颜色
    lineChart.yLabelColor = [UIColor redColor];
    //x轴单位
    lineChart.xUnit =@"月份";
    lineChart.yUnit =@"销量";
    //设置X轴上的坐标内容
    [lineChart setXLabels:@[@"1月",@"2月",@"3月",@"4月",@"5月"]];
    //line Chart No 1
    NSArray *dataAry1 =@[@"60.1", @"160.1", @"126.4",@"262.2", @"186.2"];
    PNLineChartData *data1 = [PNLineChartDatanew];
    data1.color = PNYellow;
    // data1.dataTitle = @"Helloworld";
    //设置点的样式
    data1.inflexionPointStyle = PNLineChartPointStyleCircle;
    data1.inflexionPointColor = [UIColorpurpleColor];
    //坐标值是否显示
    data1.showPointLabel =YES;
    //坐标值显示的颜色
    data1.pointLabelColor = [UIColor redColor];
    //坐标值的字体大小
    data1.pointLabelFont = [UIFontsystemFontOfSize:12];
    //坐标值显示几位数
    data1.pointLabelFormat =@"%1.1f";
    //设置折线有几个值
    data1.itemCount = lineChart.xLabels.count;
    data1.getData = ^PNLineChartDataItem*(NSUInteger item) {
        CGFloat yValue = [dataAry1[item] floatValue];
        //设置X轴对应的Y轴的值
        return[PNLineChartDataItem dataItemWithY:yValue];
    };

    //Line Chart No 2
    NSArray *dataAry2 =@[@"20.1", @"280.1", @"102.4",@"202.2", @"49.3"];
    PNLineChartData *data2 = [PNLineChartDatanew];
   data2.color = PNTwitterColor;
   data2.itemCount = lineChart.xLabels.count;
   data2.getData = ^PNLineChartDataItem*(NSUInteger item) {
        CGFloat yValue = [dataAry2[item]floatValue];
        return[PNLineChartDataItem dataItemWithY:yValue];
    };
    // lineChart.delegate = self;
    //注意:此句要在添加图例之前写
    lineChart.chartData =@[data1, data2];
    [self.view addSubview: lineChart];
    
    //添加图例
    data1.dataTitle =@"苹果销量";
    data2.dataTitle =@"香蕉销量";
    //横向显示
    lineChart.legendStyle =PNLegendItemStyleStacked;
    lineChart.legendFontColor = [UIColorblackColor];
    lineChart.legendFont = [UIFontsystemFontOfSize:25.0];
    //图例所在位置
    UIView *legend = [lineChartgetLegendWithMaxWidth:200];
    // legend.backgroundColor =[UIColor redColor];
    [legend setFrame:CGRectMake(10, 350,
legend.frame.size.width, legend.frame.size.height)];
    //显示比例
    lineChart.hasLegend =YES;
    //显示位置
    lineChart.legendPosition =PNLegendPositionBottom;
    //绘制出来
    [lineChart strokeChart];
    [self.view addSubview: legend];
}
2.圆状图
- (void)makeCircleChart
{
    /*参数:
     clocwise:逆时针还是顺时针
     shadow:剩下的百分数现显示的颜色
     overrideLineWidth:宽度
     */
    PNCircleChart *circleChart =[[PNCircleChart alloc] initWithFrame:CGRectMake(0,100, SCREEN_WIDTH, 250)
total:@100 
current:@10
clockwise:YES 
shadow:YESshadowColor:[UIColor grayColor] 
displayCountingLabel:YES
overrideLineWidth:@10];
    
    circleChart.chartType =PNChartFormatTypePercent;
    circleChart.strokeColor = [UIColorgreenColor];
    circleChart.duration =3;//进度条持续时间
    [circleChart strokeChart];
    [self.view addSubview: circleChart];
}
3.柱状图
- (void)makeBarChart{
    PNBarChart *barChart = [[PNBarChart alloc]initWithFrame:CGRectMake(0, 100, SCREEN_WIDTH, 250)];

    //是否显示xy轴的数字
    barChart.showLabel =YES;
    //是否显示水平线,把柱子压低上移了
    // barChart.showLevelLine = YES;
    //是否显示xy轴
    barChart.showChartBorder =YES;
    //是否显示柱子上的数值
    barChart.isShowNumbers =YES;
    //立体显示
    barChart.isGradientShow =YES;
    //设置柱子的圆角
    barChart.barRadius =5;
    barChart.labelTextColor = [UIColorblueColor];
    // barChart.xLabelWidth = 10.f;
    barChart.yChartLabelWidth =10;
    barChart.chartMarginLeft =10;
    barChart.chartMarginRight =10;
    barChart.chartMarginTop =5;
    barChart.chartMarginBottom =10;
    barChart.labelMarginTop =5.0;//X坐标刻度的上边距
    //设置bar Color
    barChart.strokeColor = [UIColor redColor];
    barChart.xLabels =@[@"1", @"2",@"3", @"4",@"5"];
    barChart.yValues =@[@"20", @"36",@"78", @"60",@"92"];
    barChart.yLabelFormatter = ^NSString*(CGFloat yLabelValue) {
        return[NSString stringWithFormat:@"%f", yLabelValue];
    };

    //开始绘制
    [barChart strokeChart];
    [self.view addSubview:barChart];
}
4.饼状图
- (void)makePieChart{
    NSArray*items = @[
                       [PNPieChartDataItem dataItemWithValue:30 color:PNPinkGrey description:@"cat"],
                       [PNPieChartDataItem dataItemWithValue:20 color:PNDarkBlue description:@"pig"],
                       [PNPieChartDataItem dataItemWithValue:40 color:PNRed description:@"dog"]];
    PNPieChart*pieChart = [[PNPieChart alloc] initWithFrame:CGRectMake(20, 100, 300, 300) items:items];
    // pieChart.delegate = self;
    pieChart.descriptionTextColor= [UIColor yellowColor];
    pieChart.descriptionTextFont= [UIFont fontWithName:@"Avenir-Medium" size:20];
    //阴影颜色
    pieChart.descriptionTextShadowColor= [UIColor redColor];
    //显示实际数值,不显示实际比例
    pieChart.showAbsoluteValues= NO;
    //只显示数值,不显示内容描述
    pieChart.showOnlyValues= NO;
    pieChart.innerCircleRadius= 0;
    pieChart.outerCircleRadius= 0;
    [pieChartstrokeChart];
    //加到父视图上
    [self.view addSubview:pieChart];
    //显示比例
    pieChart.hasLegend= YES;
    //横向显示
    pieChart.legendStyle= PNLegendItemStyleSerial;
    pieChart.legendFont= [UIFont boldSystemFontOfSize:20];
    //显示位置
    pieChart.legendPosition= PNLegendPositionTop;
    //获得图例,当横向排布不下另起一行
    UIView*legend = [pieChart getLegendWithMaxWidth:100];
    legend.frame= CGRectMake(100,30, legend.bounds.size.width, legend.bounds.size.height);

    [self.view addSubview:legend];
}

3.效果图

CC394FA565CB13ABDDA3DA674A8EE45E.png

79AAE09C37ABD9AEEB7AD300C8E2B13E.png

0F7452E7833F3631D40A61F1540A8366.png

2832AF3AC01A1BBEDB4154B6248D8C9A.png
github地址:https://github.com/shuoshuo123/PNChart
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,108评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,699评论 1 296
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,812评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,236评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,583评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,739评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,957评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,704评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,447评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,643评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,133评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,486评论 3 256
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,151评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,108评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,889评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,782评论 2 277
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,681评论 2 272

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,577评论 25 707
  • 今天的我们在20岁最好的年纪,正值青春的美好,面对身边一个又一个诱惑,是接受还是拒绝? 我们都曾羡慕别...
    我太天真阅读 821评论 3 3
  • 作者:海仓小学一年级 宋怡辰 指导老师:陈欢欢 我们今天在花园里上课,刚一进门就看见了漂亮的喷泉,喷泉的后面...
    欢乐颜晴阅读 415评论 0 1
  • 天边的那一抹亮光不知何时躲进了大山的怀抱,巷子里的地摊排挡人也渐渐多了起来。衣着略单薄的我穿梭在人群中,冷不丁的打...
    南小谂阅读 284评论 1 2