iOS PNChart 使用详解

1.PNLineChart  (折线图)

[objc]  view plain  copy
  1.         self.lineChart = [[PNLineChart alloc] initWithFrame:CGRectMake(0135.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  iOS PNChart 使用详解_第1张图片
  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(30340, 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(0135.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 - 100135200.0200.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(130350, 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 - 30135280200)];  
  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(0135.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;  

你可能感兴趣的:(PNChart,使用详解,PNChart,使用详解,iOS,图表框架,PNChart,chart)