1.要求
PNChart 依賴于下列框架郑兴,在使用前請(qǐng)導(dǎo)入這些框架(ps:至于怎么導(dǎo)入丑慎,這里就不說(shuō)了):
- Foundation.framework
- UIKit.framework
- CoreGraphics.framework
- QuartzCore.framework
切記:這個(gè)框架依賴于第三方框架:UICountingLabel 請(qǐng)自行去https://github.com/dataxpress/UICountingLabel下載贡未,并添加到這個(gè)你的項(xiàng)目中漓帚。
2.使用
2.1 折線圖(LineChart)使用
折線圖.png
PNLineChart * lineChart = [[PNLineChart alloc] initWithFrame:CGRectMake(0, 135.0, SCREEN_WIDTH, 200.0)];
// 設(shè)置x軸上坐標(biāo)內(nèi)容
[lineChart setXLabels:@[@"1",@"2",@"3",@"4",@"5"]];
// 設(shè)置好像沒什么用
lineChart.xLabelColor = [UIColor orangeColor];
lineChart.showLabel = YES;
// 是否顯示Y軸的數(shù)值
lineChart.showGenYLabels = YES;
// 是否顯示橫向虛線
lineChart.showYGridLines = YES;
// 是否平滑的曲線
lineChart.showSmoothLines = NO;
// 是否顯示xy 坐標(biāo)軸
lineChart.showCoordinateAxis = YES;
// 軸的顏色
lineChart.axisColor = [UIColor orangeColor];
// 軸的寬度
lineChart.axisWidth = 2.0f;
NSLog(@"%f",lineChart.chartMarginLeft);
// lineChart.thousandsSeparator = YES;
// 設(shè)置y軸坐標(biāo)的顏色
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";
// 設(shè)置點(diǎn)的格式
data01.inflexionPointStyle = PNLineChartPointStyleCircle;
data01.inflexionPointColor = [UIColor purpleColor];
// 是否點(diǎn)label
data01.showPointLabel = YES;
data01.pointLabelColor = [UIColor redColor];
data01.pointLabelFont = [UIFont systemFontOfSize:12];
data01.pointLabelFormat = @"%1.1f";
// 設(shè)置折線有幾個(gè)值
data01.itemCount = lineChart.xLabels.count;
data01.getData = ^(NSUInteger index) {
CGFloat yValue = [data01Array[index] floatValue];
// 設(shè)置x軸坐標(biāo)對(duì)應(yīng)的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];
};
// 設(shè)置line的數(shù)據(jù)數(shù)組
lineChart.chartData = @[data01, data02];
// 繪制出來(lái)
[lineChart strokeChart];
[self.view addSubview:lineChart];
2.2 柱狀圖(BarChart)使用
柱狀圖.png
PNBarChart *barChart = [[PNBarChart alloc] initWithFrame:CGRectMake(0, 135.0, SCREEN_WIDTH, 200.0)];
// 是否顯示xy 軸的數(shù)字
barChart.showLabel = YES;
// 是否顯示水平線 但把柱子壓低上移了
// barChart.showLevelLine = YES;
//是否顯示xy 軸
barChart.showChartBorder = YES;
// 是否顯示柿子的數(shù)值
barChart.isShowNumbers = YES;
// 立體顯示
barChart.isGradientShow = YES;
// 設(shè)置柱子的圓角
barChart.barRadius = 5;
// 設(shè)置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 圓狀圖(CircleChart)使用
circle Chart.png
// 設(shè)置圓狀圖
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 餅狀圖(PieChart)使用
餅狀圖.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;
// 獲得圖例 當(dāng)橫向排布不下另起一行
UIView *legend = [pieChart getLegendWithMaxWidth:100];
legend.frame = CGRectMake(100, 300, legend.bounds.size.width, legend.bounds.size.height);
[self.view addSubview:legend];
2.5 分散圖(ScatterChart)使用
分散圖.png
PNScatterChart *scatterChart = [[PNScatterChart alloc] initWithFrame:CGRectMake(0, 100, SCREEN_WIDTH, 300)];
//是否顯示坐標(biāo)軸
scatterChart.showCoordinateAxis = YES;
scatterChart.axisColor = [UIColor blackColor];
scatterChart.axisWidth = 1;
//設(shè)置x y顯示的格式
scatterChart.xLabelFormat = @"%.1f";
scatterChart.yLabelFormat = @"%.0f%%";
//設(shè)置x奔坟、y軸上的最大值姻乓、最小值,及總坐標(biāo)點(diǎn)數(shù)
[scatterChart setAxisXWithMinimumValue:20 andMaxValue:60 toTicks:5];
[scatterChart setAxisYWithMinimumValue:0 andMaxValue:20 toTicks:5];
// [scatterChart setAxisXLabel:@[@"x1", @"x2",@"x3",@"x4",@"x5"]];
// [scatterChart setAxisYLabel:@[@"y1",@"y2",@"y3",@"y4",@"y5"]];
scatterChart.descriptionTextColor = [UIColor blueColor];
scatterChart.descriptionTextFont = [UIFont systemFontOfSize:14];
// scatterChart.des
[self.view addSubview:scatterChart];
__block NSMutableArray *arr = [NSMutableArray array];
for (int i = 0; i < 15; i++) {
CGFloat x = 20 + arc4random() % 40;
CGFloat y = arc4random() % 20;
[arr addObject:[NSValue valueWithCGPoint:CGPointMake(x, y)]];
}
//創(chuàng)建數(shù)組
PNScatterChartData *data = [[PNScatterChartData alloc] init];
data.inflexionPointStyle = PNScatterChartPointStyleTriangle;
data.fillColor = [UIColor greenColor];
data.strokeColor = [UIColor greenColor];
data.itemCount = arr.count;
data.size = 4;
data.getData = ^PNScatterChartDataItem *(NSUInteger item) {
NSValue *value = arr[item];
CGPoint p = value.CGPointValue;
return [PNScatterChartDataItem dataItemWithX:p.x AndWithY:p.y];
};
[scatterChart setup];
scatterChart.chartData = @[data];
[scatterChart drawLineFromPoint:CGPointMake(20, 0) ToPoint:CGPointMake(60, 18) WithLineWith:2 AndWithColor:[UIColor redColor]];