1.要求
PNChart 依賴于下列框架，在使用前請導入這些框架(ps:至于怎么導入，這里就不說了)：
- Foundation.framework
- UIKit.framework
- CoreGraphics.framework
- QuartzCore.framework
切記：這個框架依賴于第三方框架：UICountingLabel 請自行去https://github.com/dataxpress/UICountingLabel下載，并添加到這個你的項目中。
2.使用
2.1 折線圖(LineChart)使用
折線圖.png
PNLineChart * lineChart = [[PNLineChart alloc] initWithFrame:CGRectMake(0, 135.0, SCREEN_WIDTH, 200.0)];
// 設置x軸上坐標內容
[lineChart setXLabels:@[@"1",@"2",@"3",@"4",@"5"]];
// 設置好像沒什么用
lineChart.xLabelColor = [UIColor orangeColor];
lineChart.showLabel = YES;
// 是否顯示Y軸的數值
lineChart.showGenYLabels = YES;
// 是否顯示橫向虛線
lineChart.showYGridLines = YES;
// 是否平滑的曲線
lineChart.showSmoothLines = NO;
// 是否顯示xy 坐標軸
lineChart.showCoordinateAxis = YES;
// 軸的顏色
lineChart.axisColor = [UIColor orangeColor];
// 軸的寬度
lineChart.axisWidth = 2.0f;
NSLog(@"%f",lineChart.chartMarginLeft);
// lineChart.thousandsSeparator = YES;
// 設置y軸坐標的顏色
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";
// 設置點的格式
data01.inflexionPointStyle = PNLineChartPointStyleCircle;
data01.inflexionPointColor = [UIColor purpleColor];
// 是否點label
data01.showPointLabel = YES;
data01.pointLabelColor = [UIColor redColor];
data01.pointLabelFont = [UIFont systemFontOfSize:12];
data01.pointLabelFormat = @"%1.1f";
// 設置折線有幾個值
data01.itemCount = lineChart.xLabels.count;
data01.getData = ^(NSUInteger index) {
CGFloat yValue = [data01Array[index] floatValue];
// 設置x軸坐標對應的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];
};
// 設置line的數據數組
lineChart.chartData = @[data01, data02];
// 繪制出來
[lineChart strokeChart];
[self.view addSubview:lineChart];
2.2 柱狀圖(BarChart)使用
柱狀圖.png
PNBarChart *barChart = [[PNBarChart alloc] initWithFrame:CGRectMake(0, 135.0, SCREEN_WIDTH, 200.0)];
// 是否顯示xy 軸的數字
barChart.showLabel = YES;
// 是否顯示水平線 但把柱子壓低上移了
// barChart.showLevelLine = YES;
//是否顯示xy 軸
barChart.showChartBorder = YES;
// 是否顯示柿子的數值
barChart.isShowNumbers = YES;
// 立體顯示
barChart.isGradientShow = YES;
// 設置柱子的圓角
barChart.barRadius = 5;
// 設置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
// 設置圓狀圖
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;
// 獲得圖例 當橫向排布不下另起一行
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)];
//是否顯示坐標軸
scatterChart.showCoordinateAxis = YES;
scatterChart.axisColor = [UIColor blackColor];
scatterChart.axisWidth = 1;
//設置x y顯示的格式
scatterChart.xLabelFormat = @"%.1f";
scatterChart.yLabelFormat = @"%.0f%%";
//設置x、y軸上的最大值、最小值，及總坐標點數
[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)]];
}
//創建數組
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]];
