iOS PNChart 使用详解

1.PNLineChart  (折线图)

[objc]  view plain  copy

1.         self.lineChart = [[PNLineChart alloc] initWithFrame:CGRectMake(0, 135.0, SCREEN_WIDTH, 200.0)];  
2.         self.lineChart.yLabelFormat = @"%1.1f"; // 格式化Y坐标  
3.         self.lineChart.backgroundColor = [UIColor clearColor];  
4.         [self.lineChart setXLabels:@[@"SEP 1",@"SEP 2",@"SEP 3",@"SEP 4",@"SEP 5",@"SEP 6",@"SEP 7"]]; // 设置X坐标的刻度  
5.         self.lineChart.showCoordinateAxis = YES; // 是否显示坐标轴  
6.           
7.         //Use yFixedValueMax and yFixedValueMin to Fix the Max and Min Y Value  
8.         //Only if you needed  
9.         self.lineChart.yFixedValueMax = 300.0; // y轴最大值  
10.         self.lineChart.yFixedValueMin = 0.0; // y轴最小值  
11.   
12.         [self.lineChart setYLabels:@[  
13.             @"0 min",  
14.             @"50 min",  
15.             @"100 min",  
16.             @"150 min",  
17.             @"200 min",  
18.             @"250 min",  
19.             @"300 min",  
20.             ]  
21.          ]; // 设置Y坐标刻度  
22.           
23.         // Line Chart #1 第一条线  
24.         NSArray * data01Array = @[@60.1, @160.1, @126.4, @0.0, @186.2, @127.2, @176.2];  
25.         PNLineChartData *data01 = [PNLineChartData new];  
26.         data01.dataTitle = @"Alpha";  
27.         data01.color = PNFreshGreen;  
28.         data01.alpha = 0.3f;  
29.         data01.itemCount = data01Array.count;  
30.         data01.inflexionPointStyle = PNLineChartPointStyleTriangle;  
31.         data01.getData = ^(NSUInteger index) {  
32.             CGFloat yValue = [data01Array[index] floatValue];  
33.             return [PNLineChartDataItem dataItemWithY:yValue];  
34.         };  
35.           
36.         // Line Chart #2 第二条线  
37.         NSArray * data02Array = @[@0.0, @180.1, @26.4, @202.2, @126.2, @167.2, @276.2];  
38.         PNLineChartData *data02 = [PNLineChartData new];  
39.         data02.dataTitle = @"Beta";  
40.         data02.color = PNTwitterColor;  
41.         data02.alpha = 0.5f;  
42.         data02.itemCount = data02Array.count;  
43.         data02.inflexionPointStyle = PNLineChartPointStyleCircle;  
44.         data02.getData = ^(NSUInteger index) {  
45.             CGFloat yValue = [data02Array[index] floatValue];  
46.             return [PNLineChartDataItem dataItemWithY:yValue];  
47.         };  
48.           
49.         self.lineChart.chartData = @[data01, data02];  
50.         [self.lineChart strokeChart];  
51.         self.lineChart.delegate = self;  
52.           
53.   
54.         [self.view addSubview:self.lineChart];  
55.   
56.         self.lineChart.legendStyle = PNLegendItemStyleStacked;// 标示放置的样式  
57.         self.lineChart.legendFont = [UIFont boldSystemFontOfSize:12.0f];  
58.         self.lineChart.legendFontColor = [UIColor redColor];  
59.           
60.         // 标示所在的View  
61.         UIView *legend = [self.lineChart getLegendWithMaxWidth:320];  
62.         [legend setFrame:CGRectMake(30, 340, legend.frame.size.width, legend.frame.size.height)];  
63.         legend.backgroundColor = [UIColor yellowColor];  
64.         [self.view addSubview:legend];   

运行效果如下:

2.PNBarChart(柱状图)

[objc]  view plain  copy

1. self.barChart = [[PNBarChart alloc] initWithFrame:CGRectMake(0, 135.0, SCREEN_WIDTH, 200.0)];  
2. self.barChart.backgroundColor = [UIColor clearColor];  
3. self.barChart.yLabelFormatter = ^(CGFloat yValue){  
4.     return [barChartFormatter stringFromNumber:[NSNumber numberWithFloat:yValue]];  
5. };  
6.   
7. self.barChart.yChartLabelWidth = 20.0; // Y坐标label宽度  
8. self.barChart.chartMarginLeft = 30.0;  
9. self.barChart.chartMarginRight = 10.0;  
10. self.barChart.chartMarginTop = 5.0;  
11. self.barChart.chartMarginBottom = 10.0;  
12.   
13.   
14. self.barChart.labelMarginTop = 5.0; // X坐标刻度的上边距  
15. self.barChart.showChartBorder = YES; // 坐标轴  
16. [self.barChart setXLabels:@[@"2",@"3",@"4",@"5",@"2",@"3",@"4",@"5"]];  
17. [self.barChart setYValues:@[@10.82,@1.88,@6.96,@33.93,@10.82,@1.88,@6.96,@33.93]];  
18.   
19. [self.barChart setStrokeColors:@[PNGreen,PNGreen,PNRed,PNGreen,PNGreen,PNGreen,PNRed,PNGreen]];  
20. self.barChart.isGradientShow = YES; // 立体效果  
21. self.barChart.isShowNumbers = NO; // 显示各条状图的数值  
22.   
23. [self.barChart strokeChart];  
24.   
25. self.barChart.delegate = self;  
26.   
27. [self.view addSubview:self.barChart];  

运行效果如下:

3.PNCircleChart(圆圈进度图)

[objc]  view plain  copy

1. self.circleChart = [[PNCircleChart alloc] initWithFrame:CGRectMake(0,150.0, SCREEN_WIDTH, 100.0)  
2.                                                              total:@100  
3.                                                            current:@60  
4.                                                          clockwise:YES];  
5.   
6. self.circleChart.backgroundColor = [UIColor clearColor];  
7.   
8. [self.circleChart setStrokeColor:[UIColor clearColor]];  
9. [self.circleChart setStrokeColorGradientStart:[UIColor blueColor]];  
10. [self.circleChart strokeChart];  
11.   
12. [self.view addSubview:self.circleChart];  

运行效果如下:

4.PNPieChart(饼图)

[objc]  view plain  copy

1. // 数据  
2.         NSArray *items = @[[PNPieChartDataItem dataItemWithValue:10 color:PNLightGreen],  
3.                            [PNPieChartDataItem dataItemWithValue:20 color:PNFreshGreen description:@"WWDC"],  
4.                            [PNPieChartDataItem dataItemWithValue:40 color:PNDeepGreen description:@"GOOG I/O"],  
5.                            ];  
6.         // 初始化  
7.         self.pieChart = [[PNPieChart alloc] initWithFrame:CGRectMake(SCREEN_WIDTH /2.0 - 100, 135, 200.0, 200.0) items:items];  
8.         self.pieChart.descriptionTextColor = [UIColor whiteColor];  
9.         self.pieChart.descriptionTextFont  = [UIFont fontWithName:@"Avenir-Medium" size:11.0];  
10.         self.pieChart.descriptionTextShadowColor = [UIColor clearColor]; // 阴影颜色  
11.         self.pieChart.showAbsoluteValues = NO; // 显示实际数值(不显示比例数字)  
12.         self.pieChart.showOnlyValues = YES; // 只显示数值不显示内容描述  
13.           
14.         self.pieChart.innerCircleRadius = 0;  
15. //        self.pieChart.outerCircleRadius = 0;  
16.           
17.         [self.pieChart strokeChart];  
18.           
19.           
20.           
21.         self.pieChart.legendStyle = PNLegendItemStyleStacked; // 标注排放样式  
22.         self.pieChart.legendFont = [UIFont boldSystemFontOfSize:12.0f];  
23.           
24.         UIView *legend = [self.pieChart getLegendWithMaxWidth:200];  
25.         [legend setFrame:CGRectMake(130, 350, legend.frame.size.width, legend.frame.size.height)];  
26.         [self.view addSubview:legend];  
27.       
28.         [self.view addSubview:self.pieChart];  

运行效果如下:

5.PNScatterChart(点状分布图)

[objc]  view plain  copy

1.         self.scatterChart = [[PNScatterChart alloc] initWithFrame:CGRectMake(SCREEN_WIDTH /6.0 - 30, 135, 280, 200)];  
2. //        self.scatterChart.yLabelFormat = @"xxx %1.1f";  
3.         [self.scatterChart setAxisXWithMinimumValue:20 andMaxValue:100 toTicks:6];  
4.         [self.scatterChart setAxisYWithMinimumValue:30 andMaxValue:50 toTicks:5];  
5.         [self.scatterChart setAxisXLabel:@[@"x1", @"x2", @"x3", @"x4", @"x5", @"x6"]];  
6.         [self.scatterChart setAxisYLabel:@[@"y1", @"y2", @"y3", @"y4", @"y5"]];  
7.   
8.         NSArray * data01Array = [self randomSetOfObjects];  
9.         PNScatterChartData *data01 = [PNScatterChartData new];  
10.         data01.strokeColor = PNGreen;  
11.         data01.fillColor = PNFreshGreen;  
12.         data01.size = 2;  
13.         data01.itemCount = [[data01Array objectAtIndex:0] count];  
14.         data01.inflexionPointStyle = PNScatterChartPointStyleCircle;  
15.         __block NSMutableArray *XAr1 = [NSMutableArray arrayWithArray:[data01Array objectAtIndex:0]];  
16.         __block NSMutableArray *YAr1 = [NSMutableArray arrayWithArray:[data01Array objectAtIndex:1]];  
17.   
18.         data01.getData = ^(NSUInteger index) {  
19.             CGFloat xValue = [[XAr1 objectAtIndex:index] floatValue];  
20.             CGFloat yValue = [[YAr1 objectAtIndex:index] floatValue];  
21.             return [PNScatterChartDataItem dataItemWithX:xValue AndWithY:yValue];  
22.         };  
23.           
24.         [self.scatterChart setup];  
25.         self.scatterChart.chartData = @[data01];  
26. /***     
27.         this is for drawing line to compare 
28.         CGPoint start = CGPointMake(20, 35); 
29.         CGPoint end = CGPointMake(80, 45); 
30.         [self.scatterChart drawLineFromPoint:start ToPoint:end WithLineWith:2 AndWithColor:PNBlack]; 
31. ***/  
32.         self.scatterChart.delegate = self;  
33.         self.changeValueButton.hidden = YES;  
34.         [self.view addSubview:self.scatterChart];  

运行效果如下:

6.PNRadarChart(无线电图)

[objc]  view plain  copy

1. NSArray *items = @[[PNRadarChartDataItem dataItemWithValue:3 description:@"Art"],  
2.                    [PNRadarChartDataItem dataItemWithValue:2 description:@"Math"],  
3.                    [PNRadarChartDataItem dataItemWithValue:8 description:@"Sports"],  
4.                    [PNRadarChartDataItem dataItemWithValue:5 description:@"Literature"],  
5.                    [PNRadarChartDataItem dataItemWithValue:4 description:@"Other"],  
6.                    ];  
7. self.radarChart = [[PNRadarChart alloc] initWithFrame:CGRectMake(0, 135.0, SCREEN_WIDTH, 300.0) items:items valueDivider:1];  
8. [self.radarChart strokeChart];  
9.   
10. [self.view addSubview:self.radarChart];  

运行效果如下:

代理方法有:

[objc]  view plain  copy

1. /** 
2.  * Callback method that gets invoked when the user taps on the chart line. 
3.  */  
4. - (void)userClickedOnLinePoint:(CGPoint)point lineIndex:(NSInteger)lineIndex; // 折线图点击方法  
5.   
6. /** 
7.  * Callback method that gets invoked when the user taps on a chart line key point. 
8.  */  
9. - (void)userClickedOnLineKeyPoint:(CGPoint)point  
10.                         lineIndex:(NSInteger)lineIndex  
11.                        pointIndex:(NSInteger)pointIndex; // 折线图点击方法,能知道点击的是第几个点  
12.   
13. /** 
14.  * Callback method that gets invoked when the user taps on a chart bar. 
15.  */  
16. - (void)userClickedOnBarAtIndex:(NSInteger)barIndex; // 图表的点击方法  
17.   
18.   
19. - (void)userClickedOnPieIndexItem:(NSInteger)pieIndex;  
20. - (void)didUnselectPieItem;