PNChart:一个简洁高效的iOS图表库
IzettaHafne
8年前
<h2>1.要求</h2> <p>PNChart 依赖于下列框架,在使用前请导入这些框架(ps:至于怎么导入,这里就不说了):</p> <ul> <li>Foundation.framework</li> <li>UIKit.framework</li> <li>CoreGraphics.framework</li> <li>QuartzCore.framework<br> <strong>切记</strong> :这个框架依赖于第三方框架:UICountingLabel 请自行去 https://github.com 下载,并添加到这个框架中。</li> </ul> <h2>2.使用</h2> <h3>2.1 折线图使用</h3> <p style="text-align:center"><img src="https://simg.open-open.com/show/e3986e30c3de21a1dc786bb7143fd776.png"></p> <p>折线图.png</p> <pre> <code class="language-objectivec">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 = PN推terColor; 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];</code></pre> <h3>2.2 柱状图使用</h3> <p style="text-align:center"><img src="https://simg.open-open.com/show/0020d265b3908b02704745d1bc0f858c.png"></p> <p>柱状图.png</p> <pre> <code class="language-objectivec">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];</code></pre> <h3>2.3 circle charet 使用</h3> <p style="text-align:center"><img src="https://simg.open-open.com/show/8ce8d928d0b003e7b9f1455a2ed6a9ab.png"></p> <p>circle Chart.png</p> <pre> <code class="language-objectivec">// 设置圆状图 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];</code></pre> <h3>2.4 饼状图使用</h3> <p style="text-align:center"><img src="https://simg.open-open.com/show/06665cd514262b102e5858db7715732f.png"></p> <p>饼状图.png</p> <pre> <code class="language-objectivec">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];</code></pre> <p> </p> <p>来自:http://www.jianshu.com/p/1dc4af401be5</p> <p> </p>