iOS绘制折线图、树状图等图形
项目中需要将数据以折线的形式展示出来，于是乎在网上找了一大堆相关资料，最后觉得还是PNChart这个第三方库可以满足我的需求，并且不是很有难度
1、首先下载PNChart（俩种方法，cocoapods和直接下载导入）
pod search PNChart之后我们直接下载最新的0.8.8版本就可以，
2、将PNChart.h和PNChartDelegate.h头文件引入需要用的类里面
3、直接上代码了。。。
（1）属性
@property (nonatomic, strong)PNLineChart *lineChart;//折线
@property (nonatomic, strong)PNBarChart *barChart;//柱状
@property (nonatomic, strong)PNCircleChart * circleChart; //圆形状态
@property (nonatomic, strong)PNPieChart *pieChart; //饼状图
@property (nonatomic, strong)PNScatterChart *scatterChart; //浮点型
@property (nonatomic, strong)PNRadarChart *radarChart; //雷达状
（2）方法
- （void）initWithChart //绘制折线图
{
self.lineChart = [[PNLineChart alloc] initWithFrame:CGRectMake(0, 135.0, SCREEN_WIDTH, 200.0)];
self.lineChart.yLabelFormat = @"%1.1f";
self.lineChart.backgroundColor = [UIColor clearColor];
[self.lineChart setXLabels:@[@"SEP 1",@"SEP 2",@"SEP 3",@"SEP 4",@"SEP 5",@"SEP 6",@"SEP 7"]];
//控制是否显示坐标轴。默认为无
self.lineChart.showCoordinateAxis = YES;
//当需要最大值时候使用yFixedValueMax和yFixedValueMin来确定最大值和最小值
self.lineChart.yFixedValueMax = 300.0;
self.lineChart.yFixedValueMin = 0.0;
//设置Y轴坐标
[self.lineChart setYLabels:@[
@"0 min",
@"50 min",
@"100 min",
@"150 min",
@"200 min",
@"250 min",
@"300 min",
]
];
// 线条1
NSArray * data01Array = @[@60.1, @160.1, @126.4, @0.0, @186.2, @127.2, @176.2];
PNLineChartData *data01 = [PNLineChartData new];
data01.dataTitle = @"本期";
data01.color = PNFreshGreen;
data01.alpha = 0.3f;
data01.itemCount = data01Array.count;
data01.inflexionPointStyle = PNLineChartPointStyleTriangle;
data01.getData = ^(NSUInteger index) {
CGFloat yValue = [data01Array[index] floatValue];
return [PNLineChartDataItem dataItemWithY:yValue];
};
// 线条2
NSArray * data02Array = @[@0.0, @180.1, @26.4, @202.2, @126.2, @167.2, @276.2];
PNLineChartData *data02 = [PNLineChartData new];
data02.dataTitle = @"上期";
data02.color = PNTwitterColor;
data02.alpha = 0.5f;
data02.itemCount = data02Array.count;
data02.inflexionPointStyle = PNLineChartPointStyleCircle;
data02.getData = ^(NSUInteger index) {
CGFloat yValue = [data02Array[index] floatValue];
return [PNLineChartDataItem dataItemWithY:yValue];
};
self.lineChart.chartData = @[data01, data02];
[self.lineChart strokeChart];
self.lineChart.delegate = self;
[self.view addSubview:self.lineChart];
self.lineChart.legendStyle = PNLegendItemStyleStacked;
self.lineChart.legendFont = [UIFont boldSystemFontOfSize:12.0f];
self.lineChart.legendFontColor = [UIColor redColor];
UIView *legend = [self.lineChart getLegendWithMaxWidth:320];
[legend setFrame:CGRectMake(30, 340, legend.frame.size.width, legend.frame.size.width)];
[self.view addSubview:legend];
}
-(void)initWithBarChart //绘制柱状图
{
static NSNumberFormatter *barChartFormatter;
if (!barChartFormatter){
barChartFormatter = [[NSNumberFormatter alloc] init];
barChartFormatter.numberStyle = NSNumberFormatterCurrencyStyle;
barChartFormatter.allowsFloats = NO;
barChartFormatter.maximumFractionDigits = 0;
}
self.barChart = [[PNBarChart alloc] initWithFrame:CGRectMake(0, 135.0, SCREEN_WIDTH, 200.0)];
self.barChart.backgroundColor = [UIColor clearColor];
self.barChart.yLabelFormatter = ^(CGFloat yValue){
return [barChartFormatter stringFromNumber:[NSNumber numberWithFloat:yValue]];
};
self.barChart.yChartLabelWidth = 20.0;
self.barChart.chartMarginLeft = 30.0;
self.barChart.chartMarginRight = 10.0;
self.barChart.chartMarginTop = 5.0;
self.barChart.chartMarginBottom = 10.0;
self.barChart.labelMarginTop = 5.0;
self.barChart.showChartBorder = YES;
[self.barChart setXLabels:@[@"2",@"3",@"4",@"5",@"2",@"3",@"4",@"5"]];
[self.barChart setYValues:@[@10.82,@1.88,@6.96,@33.93,@10.82,@1.88,@6.96,@33.93]];
[self.barChart setStrokeColors:@[PNGreen,PNLightBlue,PNRed,PNMauve,PNBrown,PNYellow,PNDarkBlue,PNBlue]];
//是否显示梯度棒
self.barChart.isGradientShow = NO;
//是否显示数字
self.barChart.isShowNumbers = NO;
[self.barChart strokeChart];
self.barChart.delegate = self;
[self.view addSubview:self.barChart];
}
//圆圈⭕️
- (void)initWithCircleChart
{
self.circleChart = [[PNCircleChart alloc] initWithFrame:CGRectMake(0,150.0, SCREEN_WIDTH, 100.0)
total:@100
current:@60
clockwise:YES];
self.circleChart.backgroundColor = [UIColor clearColor];
[self.circleChart setStrokeColor:[UIColor clearColor]];
[self.circleChart setStrokeColorGradientStart:[UIColor blueColor]];
[self.circleChart strokeChart];
[self.view addSubview:self.circleChart];
}
//饼状图
- (void)initWithPieChart
NSArray *items = @[[PNPieChartDataItem dataItemWithValue:20 color:PNFreshGreen description:@"WWDC"],
[PNPieChartDataItem dataItemWithValue:15 color:PNDeepGreen description:@"GOOG I/O"],
[PNPieChartDataItem dataItemWithValue:40 color:PNLightGreen description:@"Google"],
[PNPieChartDataItem dataItemWithValue:15 color:PNLightBlue description:@"Baibu"],
[PNPieChartDataItem dataItemWithValue:10 color:PNLightYellow description:@"AliPay"]];
self.pieChart = [[PNPieChart alloc] initWithFrame:CGRectMake(SCREEN_WIDTH /2.0 - 100, 135, 200.0, 200.0) items:items];
self.pieChart.descriptionTextColor = [UIColor whiteColor];
self.pieChart.descriptionTextFont = [UIFont fontWithName:@"Avenir-Medium" size:11.0];
self.pieChart.descriptionTextShadowColor = [UIColor clearColor];
self.pieChart.showAbsoluteValues = NO;
self.pieChart.showOnlyValues = NO;
[self.pieChart strokeChart];
self.pieChart.legendStyle = PNLegendItemStyleStacked;
self.pieChart.legendFont = [UIFont boldSystemFontOfSize:12.0f];
UIView *legend = [self.pieChart getLegendWithMaxWidth:200];
[legend setFrame:CGRectMake(130, 350, legend.frame.size.width, legend.frame.size.height)];
[self.view addSubview:legend];
[self.view addSubview:self.pieChart];
}
//浮点状
- (void)initWithScatterChart
{
self.scatterChart = [[PNScatterChart alloc] initWithFrame:CGRectMake(SCREEN_WIDTH /6.0 - 30, 135, 280, 200)];
[self.scatterChart setAxisXWithMinimumValue:20 andMaxValue:100 toTicks:6];
[self.scatterChart setAxisYWithMinimumValue:30 andMaxValue:50 toTicks:5];
[self.scatterChart setAxisXLabel:@[@"x1", @"x2", @"x3", @"x4", @"x5", @"x6"]];
[self.scatterChart setAxisYLabel:@[@"y1", @"y2", @"y3", @"y4", @"y5"]];
NSArray * data01Array = [self randomSetOfObjects];
PNScatterChartData *data01 = [PNScatterChartData new];
data01.strokeColor = PNGreen;
data01.fillColor = PNFreshGreen;
data01.size = 2;
data01.itemCount = [[data01Array objectAtIndex:0] count];
data01.inflexionPointStyle = PNScatterChartPointStyleCircle;
__block NSMutableArray *XAr1 = [NSMutableArray arrayWithArray:[data01Array objectAtIndex:0]];
__block 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];
};
[self.scatterChart setup];
self.scatterChart.chartData = @[data01];
self.scatterChart.delegate = self;
[self.view addSubview:self.scatterChart];
}
//雷达状
- (void)initWithRadarChart
{
NSArray *items = @[[PNRadarChartDataItem dataItemWithValue:3 description:@"Art"],
[PNRadarChartDataItem dataItemWithValue:2 description:@"Math"],
[PNRadarChartDataItem dataItemWithValue:8 description:@"Sports"],
[PNRadarChartDataItem dataItemWithValue:5 description:@"Literature"],
[PNRadarChartDataItem dataItemWithValue:4 description:@"Other"],
];
self.radarChart = [[PNRadarChart alloc] initWithFrame:CGRectMake(0, 135.0, SCREEN_WIDTH, 300.0) items:items valueDivider:1];
[self.radarChart strokeChart];
[self.view addSubview:self.radarChart];
}
-(NSArray *) randomSetOfObjects
{
NSMutableArray *array = [NSMutableArray array];
NSString *LabelFormat = @"%1.f";
NSMutableArray *XAr = [NSMutableArray array];
NSMutableArray *YAr = [NSMutableArray array];
for (int i = 0; i < 25 ; i++) {
[XAr addObject:[NSString stringWithFormat:LabelFormat,(((double)arc4random() / ARC4RANDOM_MAX) * (self.scatterChart.AxisX_maxValue - self.scatterChart.AxisX_minValue) + self.scatterChart.AxisX_minValue)]];
[YAr addObject:[NSString stringWithFormat:LabelFormat,(((double)arc4random() / ARC4RANDOM_MAX) * (self.scatterChart.AxisY_maxValue - self.scatterChart.AxisY_minValue) + self.scatterChart.AxisY_minValue)]];
}
[array addObject:XAr];
[array addObject:YAr];
return (NSArray*) array;
}
以上分别是：折线图、柱状图、圆圈、饼状图、浮点图和雷达图，都是用PNChart实现的，如果有问题希望我们可以共同交流