PNChart 的使用

demo下载链接:https://share.weiyun.com/54eGKbC

使用 cocoapods 导入PNChart
宏定义:

#define MAIN_WIDTH [[UIScreen mainScreen] bounds].size.width
#define MAIN_HEIGHT [[UIScreen mainScreen] bounds].size.height

1.折线图

初始化PNLineChart

PNLineChart *lineChart = [[PNLineChart alloc]initWithFrame:CGRectMake(0, 150, [UIScreen mainScreen].bounds.size.width, 300)];

设置背景色

lineChart.backgroundColor = [UIColor whiteColor];

对坐标轴进行设置

//设置坐标轴是否可见
lineChart.showCoordinateAxis = YES;
//设置是否显示网格线
lineChart.showYGridLines = YES;
//设置网格线颜色
lineChart.yGridLinesColor = [UIColor grayColor];
//设置X轴标签
lineChart.xLabels = @[@"魅族",@"华为",@"中兴",@"小米",@"苹果",@"一加",@"乐视"];
//设置坐标轴颜色
lineChart.axisColor = [UIColor blackColor];
//设置坐标轴宽度
lineChart.axisWidth = 1.0;
//设置 y 轴的最大值
lineChart.yFixedValueMax = 20.0;
//设置 x 轴的最小值
lineChart.yFixedValueMin = 1.0;
//y 轴刻度数量
lineChart.yLabelNum = 20;

设置折线1数据

//曲线数据1
PNLineChartData *data1 = [[PNLineChartData alloc]init];
//曲线颜色
data1.color = PNRed;
//曲线格式
data1.inflexionPointStyle = PNLineChartPointStyleCircle;
//设置数据（Y轴坐标根据数据的大小自动适应）
NSArray *dataArray1 = @[@4,@8,@7,@4,@16,@6,@15];
data1.itemCount = dataArray1.count;
data1.getData = ^(NSUInteger index){
    CGFloat yValue = [dataArray1[index] floatValue];
    return [ PNLineChartDataItem dataItemWithY:yValue];    
};

设置折线2数据

//曲线数据2
PNLineChartData *data2 = [[PNLineChartData alloc]init];
//曲线颜色
data2.color = PNGreen;
//曲线格式
data2.inflexionPointStyle = PNLineChartPointStyleCircle;
//设置数据（Y轴坐标根据数据的大小自动适应）
NSArray *dataArray2 = @[@6,@15,@3,@12,@2,@5,@3];
data2.itemCount = dataArray2.count;
data2.getData = ^(NSUInteger index){
    CGFloat yValue = [dataArray2[index] floatValue];
    return [ PNLineChartDataItem dataItemWithY:yValue];
};

设置 lineChart 的数据

lineChart.chartData = @[data1,data2];

开始绘图

[lineChart strokeChart];

将 lineChart 添加到视图上

[self.view addSubview:lineChart];

添加标注

//数据标注名称
data1.dataTitle = @"数据1标注名称";
data2.dataTitle = @"数据2标注名称";
//标注摆放样式
lineChart.legendStyle = PNLegendItemStyleSerial;
//标注字体
lineChart.legendFont = [UIFont boldSystemFontOfSize:12.0f];
//标注颜色
lineChart.legendFontColor = [UIColor blackColor];

标注视图

UIView *legend = [lineChart getLegendWithMaxWidth:[UIScreen mainScreen].bounds.size.width];
[legend setFrame:CGRectMake(0, 480, legend.frame.size.width, legend.frame.size.height)];
legend.backgroundColor = [UIColor whiteColor];
[self.view addSubview:legend];

折线图效果:https://share.weiyun.com/5ahi9kN

2.环形图

//初始化圆环PNCircleChart最后一个初始化方法功能比较齐全
//total总圆100单位
//current占总圆的80单位
//clockwise顺时针方向YES
//shadow有阴影YES
//shadowColor阴影颜色yellowColor
//displayCountingLabel是否显示计数标签YES
//overrideLineWidth圆环的宽20像素
PNCircleChart * circleChart = [[PNCircleChart alloc]initWithFrame: CGRectMake(0, 150, MAIN_WIDTH, 200) total:[NSNumber numberWithDouble:100.0] current:[NSNumber numberWithDouble:55.5] clockwise:YES shadow:YES shadowColor:[UIColor yellowColor] displayCountingLabel:YES overrideLineWidth:[NSNumber numberWithInt:20]];
//设置颜色
//[circleChart setStrokeColorGradientStart:[UIColor redColor]]; //有渐变效果
circleChart.strokeColor = [UIColor redColor];
//设置类型
circleChart.chartType = PNChartFormatTypePercentDoubleOne;
//开始画圆
[circleChart strokeChart];
//背景颜色
circleChart.backgroundColor = [UIColor whiteColor];
//Add
[self.view addSubview:circleChart];

环状图效果:https://share.weiyun.com/54MqMCO

3.柱状图

self.view.backgroundColor = [UIColor whiteColor];
NSArray *items = @[[PNRadarChartDataItem dataItemWithValue:6 description:@"语文"],
                       [PNRadarChartDataItem dataItemWithValue:20 description:@"数学"],
                       [PNRadarChartDataItem dataItemWithValue:8 description:@"英语"],
                       [PNRadarChartDataItem dataItemWithValue:5 description:@"体育"],
                       [PNRadarChartDataItem dataItemWithValue:9 description:@"美术"],
                       [PNRadarChartDataItem dataItemWithValue:4 description:@"其他的"]
                       ];
//valueDivider:间距
PNRadarChart *radarChart = [[PNRadarChart alloc] initWithFrame:CGRectMake(0, 150, SCREEN_WIDTH, 300.0) items:items valueDivider:2];
//最大值
radarChart.maxValue = 24;
//网格颜色
radarChart.webColor = [UIColor lightGrayColor];
//填充颜色
radarChart.plotColor = [UIColor colorWithRed:107 / 255.0 green:202 / 255.0 blue:249 / 255.0 alpha:0.7];
//线宽
radarChart.lineWidth = 0.7;
//开始绘图
[radarChart strokeChart];
//Add
[self.view addSubview:radarChart];

柱状图效果:https://share.weiyun.com/5FLL9Y9

4.饼状图

NSArray *items = @[[PNPieChartDataItem dataItemWithValue:30 color:PNRed],
                       [PNPieChartDataItem dataItemWithValue:10 color:PNFreshGreen description:@"绿色"],
                       [PNPieChartDataItem dataItemWithValue:60 color:PNBlue description:@"蓝色"],
                       ];
//PNPieChart初始化
PNPieChart *pieChart = [[PNPieChart alloc] initWithFrame:CGRectMake(SCREEN_WIDTH /2 - 100, 150, 200, 200) items:items];
//背景色    
pieChart.backgroundColor = [UIColor whiteColor];
//扇形上字体颜色
pieChart.descriptionTextColor = [UIColor whiteColor];
pieChart.descriptionTextFont = [UIFont fontWithName:@"Avenir-Medium" size:15.0];
//扇形上字体阴影颜色
pieChart.descriptionTextShadowColor = [UIColor blackColor];
//显示实际数值(不显示比例数字)
pieChart.showAbsoluteValues = NO;
//只显示数值不显示内容描述
pieChart.showOnlyValues = NO;
//是否显示点击效果
pieChart.shouldHighlightSectorOnTouch = YES;
pieChart.enableMultipleSelection = YES;
//开始绘图
[pieChart strokeChart];
//Add
[self.view addSubview:pieChart];
// 标注排放样式
pieChart.legendStyle = PNLegendItemStyleStacked;
pieChart.legendFont = [UIFont boldSystemFontOfSize:12.0f];
UIView *legend = [pieChart getLegendWithMaxWidth:200];
[legend setFrame:CGRectMake(130, 350, legend.frame.size.width, legend.frame.size.height)];
[self.view addSubview:legend];

饼状图效果:https://share.weiyun.com/5FwkuqF

5.雷达图

self.view.backgroundColor = [UIColor whiteColor];
NSArray *items = @[[PNRadarChartDataItem dataItemWithValue:6 description:@"语文"],
                       [PNRadarChartDataItem dataItemWithValue:20 description:@"数学"],
                       [PNRadarChartDataItem dataItemWithValue:8 description:@"英语"],
                       [PNRadarChartDataItem dataItemWithValue:5 description:@"体育"],
                       [PNRadarChartDataItem dataItemWithValue:9 description:@"美术"],
                       [PNRadarChartDataItem dataItemWithValue:4 description:@"其他的"]
                       ];
    
//valueDivider:间距
PNRadarChart *radarChart = [[PNRadarChart alloc] initWithFrame:CGRectMake(0, 150, SCREEN_WIDTH, 300.0) items:items valueDivider:2];
//最大值
radarChart.maxValue = 24;
//网格颜色
radarChart.webColor = [UIColor lightGrayColor];
radarChart.plotColor = [UIColor colorWithRed:107 / 255.0 green:202 / 255.0 blue:249 / 255.0 alpha:0.7];
radarChart.lineWidth = 0.7;
//开始绘图
[radarChart strokeChart];
//Add
[self.view addSubview:radarChart];

对源码修改部分:https://share.weiyun.com/5t4w3MC
雷达图效果:https://share.weiyun.com/5dWaeWd

6.散点图

PNScatterChart *scatterChart = [[PNScatterChart alloc] initWithFrame:CGRectMake(SCREEN_WIDTH /6.0 - 30, 150, 350, 300)];
//设置 X 轴最小值,最大值,等分份数
[scatterChart setAxisXWithMinimumValue:1 andMaxValue:15 toTicks:5];
//设置 Y 轴最小值,最大值,等分份数
[scatterChart setAxisYWithMinimumValue:1 andMaxValue:15 toTicks:5];
//添加 X 轴及 Y 轴坐标
NSMutableArray *data01Array = [[NSMutableArray alloc] init];
NSMutableArray *arrX = [NSMutableArray arrayWithObjects:@"5",@"10",@"8",@"6",@"9",@"12",@"13",@"7",@"1",@"4", nil];
NSMutableArray *arrY = [NSMutableArray arrayWithObjects:@"4",@"13",@"14",@"9",@"8",@"7",@"8",@"4",@"10",@"9", nil];
[data01Array addObject:arrX];
[data01Array addObject:arrY];
    
PNScatterChartData *data01 = [PNScatterChartData new];
data01.strokeColor = PNGreen;
data01.fillColor = PNFreshGreen;
data01.size = 3;
data01.itemCount = [[data01Array objectAtIndex:0] count];
data01.inflexionPointStyle = PNScatterChartPointStyleCircle;
NSMutableArray *XAr1 = [NSMutableArray arrayWithArray:[data01Array objectAtIndex:0]];
NSMutableArray *YAr1 = [NSMutableArray arrayWithArray:[data01Array objectAtIndex:1]];
    
data01.getData = ^(NSUInteger index) {
    CGFloat xValue = [[XAr1 objectAtIndex:index] floatValue];
    CGFloat yValue = [[YAr1 objectAtIndex:index] floatValue];
    return [PNScatterChartDataItem dataItemWithX:xValue AndWithY:yValue];
};
    
[scatterChart setup];
scatterChart.chartData = @[data01];
[self.view addSubview:scatterChart];

散点图效果:https://share.weiyun.com/54MTuO4