iOS程序猿之chart图表(PNChart)
Chart图表
在开发中,特别是销售企业内部使用的APP,可能会用到数据汇总,使用到chart图表的功能!
在github上找到一个比较全,界面很漂亮的图表第三方:PNChart,它包含LineChart(折线图),BarChar(柱状图),CircleChart(圆圈进度图),PieChart(饼图),ScatterChart(点状分布图),RadarChart(无线电图)
支持使用cocoaPods导入
$ pod 'PNChart','~> 0.8.7'
头文件: #import "PNChartDelegate.h"
代理头文件: #import "PNChart.h"
使用:
1.PNLineChart (折线图)
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;