1.PNLineChart (折线图)
[objc]
view plain
copy
- self.lineChart = [[PNLineChart alloc] initWithFrame:CGRectMake(0, 135.0, SCREEN_WIDTH, 200.0)];
- self.lineChart.yLabelFormat = @"%1.1f"; // 格式化Y坐标
- self.lineChart.backgroundColor = [UIColor clearColor];
- [self.lineChart setXLabels:@[@"SEP 1",@"SEP 2",@"SEP 3",@"SEP 4",@"SEP 5",@"SEP 6",@"SEP 7"]]; // 设置X坐标的刻度
- self.lineChart.showCoordinateAxis = YES; // 是否显示坐标轴
- //Use yFixedValueMax and yFixedValueMin to Fix the Max and Min Y Value
- //Only if you needed
- self.lineChart.yFixedValueMax = 300.0; // y轴最大值
- self.lineChart.yFixedValueMin = 0.0; // y轴最小值
- [self.lineChart setYLabels:@[
- @"0 min",
- @"50 min",
- @"100 min",
- @"150 min",
- @"200 min",
- @"250 min",
- @"300 min",
- ]
- ]; // 设置Y坐标刻度
- // Line Chart #1 第一条线
- NSArray * data01Array = @[@60.1, @160.1, @126.4, @0.0, @186.2, @127.2, @176.2];
- PNLineChartData *data01 = [PNLineChartData new];
- data01.dataTitle = @"Alpha";
- 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];
- };
- // Line Chart #2 第二条线
- NSArray * data02Array = @[@0.0, @180.1, @26.4, @202.2, @126.2, @167.2, @276.2];
- PNLineChartData *data02 = [PNLineChartData new];
- data02.dataTitle = @"Beta";
- 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];
- // 标示所在的View
- UIView *legend = [self.lineChart getLegendWithMaxWidth:320];
- [legend setFrame:CGRectMake(30, 340, legend.frame.size.width, legend.frame.size.height)];
- legend.backgroundColor = [UIColor yellowColor];
- [self.view addSubview:legend];
运行效果如下:
2.PNBarChart(柱状图)
- 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; // Y坐标label宽度
- 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; // X坐标刻度的上边距
- 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,PNGreen,PNRed,PNGreen,PNGreen,PNGreen,PNRed,PNGreen]];
- self.barChart.isGradientShow = YES; // 立体效果
- self.barChart.isShowNumbers = NO; // 显示各条状图的数值
- [self.barChart strokeChart];
- self.barChart.delegate = self;
- [self.view addSubview:self.barChart];
3.PNCircleChart(圆圈进度图)
- 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];
4.PNPieChart(饼图)
- // 数据
- NSArray *items = @[[PNPieChartDataItem dataItemWithValue:10 color:PNLightGreen],
- [PNPieChartDataItem dataItemWithValue:20 color:PNFreshGreen description:@"WWDC"],
- [PNPieChartDataItem dataItemWithValue:40 color:PNDeepGreen description:@"GOOG I/O"],
- ];
- // 初始化
- 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 = YES; // 只显示数值不显示内容描述
- self.pieChart.innerCircleRadius = 0;
- // self.pieChart.outerCircleRadius = 0;
- [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];
5.PNScatterChart(点状分布图)
- self.scatterChart = [[PNScatterChart alloc] initWithFrame:CGRectMake(SCREEN_WIDTH /6.0 - 30, 135, 280, 200)];
- // self.scatterChart.yLabelFormat = @"xxx %1.1f";
- [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];
- /***
- this is for drawing line to compare
- CGPoint start = CGPointMake(20, 35);
- CGPoint end = CGPointMake(80, 45);
- [self.scatterChart drawLineFromPoint:start ToPoint:end WithLineWith:2 AndWithColor:PNBlack];
- ***/
- self.scatterChart.delegate = self;
- self.changeValueButton.hidden = YES;
- [self.view addSubview:self.scatterChart];
运行效果如下:
6.PNRadarChart(无线电图)
- 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];
代理方法有:
- /**
- * Callback method that gets invoked when the user taps on the chart line.
- */
- - (void)userClickedOnLinePoint:(CGPoint)point lineIndex:(NSInteger)lineIndex; // 折线图点击方法
- /**
- * Callback method that gets invoked when the user taps on a chart line key point.
- */
- - (void)userClickedOnLineKeyPoint:(CGPoint)point
- lineIndex:(NSInteger)lineIndex
- pointIndex:(NSInteger)pointIndex; // 折线图点击方法,能知道点击的是第几个点
- /**
- * Callback method that gets invoked when the user taps on a chart bar.
- */
- - (void)userClickedOnBarAtIndex:(NSInteger)barIndex; // 图表的点击方法
- - (void)userClickedOnPieIndexItem:(NSInteger)pieIndex;
- - (void)didUnselectPieItem;