iOS PNChart的学习和使用

https://blog.csdn.net/u012265444/article/details/77116231

 

前言

不要问我为什么这么多时间写博客。我不会告诉你们的。

我们的项目是外包出去的，外包反馈给我们的天气界面显示温度的曲线十分平滑美观，

甚是好奇，于是请教了一番，方才知道PNChart这个来自中国大神的开源神器。

于是有了这篇文章····

我知道我有那么一点点“高产”····

但是请大家理解我求知若渴，又想分享给大家的心情好不好（此处卖个萌）。

正文

1.折线图 英文名叫“Line Chart”

 

外包做出来的样子如下图：

 

很漂亮很细腻~我表示很喜欢~所以我也要学习制作~

在我坚持不懈的努力之下，终于做的差不多了。

 

 

除了一些细节在PNChart里面的代码改动没贴，(包括节点从圈变圆，还有显示度数，以及线和文本的背景颜色，这些可以问我个人（欢迎在首页扫码添加颜华微信）)

其他代码贴出来，如有错误烦请大家指正，万分感谢（行跪拜礼）：

1.  
   //折线图
2.  
   //初始化
3.  
   PNLineChart * lineChart = [[PNLineChart alloc] initWithFrame:CGRectMake(0, 64, SCREEN_WIDTH, 200.0)];
4.  
   lineChart.backgroundColor = [UIColor colorWithRed:51/255. green:121/255. blue:242/255. alpha:1];
5.  
   //设置横坐标
6.  
   [lineChart setXLabels:@[@"",@"",@"",@"",@""]];
7.  
   //设置纵坐标
8.  
   [lineChart setYLabels:@[@"",@"",@"",@"",@""]];
9.  
   //设置是否显示Y轴的数值
10.  
    lineChart.showGenYLabels = NO;
11.  
    //设置是否显示横向虚线
12.  
    lineChart.showYGridLines = NO;
13.  
    //设置轴的颜色
14.  
    lineChart.axisColor = [UIColor whiteColor];
15.  
    //设置轴的宽度
16.  
    lineChart.axisWidth = 2.0f;
17.  
    //设置y轴坐标的颜色
18.  
    lineChart.yLabelColor = [UIColor whiteColor];
19.  
     
20.  
    //第一条折线
21.  
    //初始化数组是折线节点数据
22.  
    NSArray * data01Array = @[@21, @21, @23, @24, @23];
23.  
    //折现图数据 类 包括颜色 节点数量 数据的设置
24.  
    PNLineChartData *data01 = [PNLineChartData new];
25.  
    //设置折线的颜色
26.  
    data01.color = PNWhite;
27.  
    //设置折线的宽度
28.  
    data01.lineWidth = 0.8;
29.  
    //设置折线的点数
30.  
    data01.itemCount = data01Array.count;
31.  
    //设置折点的样式
32.  
    data01.inflexionPointStyle = PNLineChartPointStyleCircle;
33.  
    //设置折点的颜色
34.  
    data01.inflexionPointColor = [UIColor whiteColor];
35.  
    //设置折点的大小
36.  
    data01.inflexionPointWidth = 3.0f;
37.  
    //设置是否展示折点的Label
38.  
    data01.showPointLabel = YES;
39.  
    //设置折点的文本颜色
40.  
    data01.pointLabelColor = [UIColor whiteColor];
41.  
    //设置折点的文本字体
42.  
    data01.pointLabelFont = [UIFont systemFontOfSize:12];
43.  
    //展示数据
44.  
    data01.getData = ^(NSUInteger index) {
45.  
    CGFloat yValue = [data01Array[index] floatValue];
46.  
    return [PNLineChartDataItem dataItemWithY:yValue];
47.  
    };
48.  
     
49.  
    //折线图的图标数据
50.  
    lineChart.chartData = @[data01];
51.  
    //设置
52.  
    lineChart.yValueMin = 20;
53.  
    lineChart.yValueMax = 30;
54.  
    //是否展示平滑线条
55.  
    lineChart.showSmoothLines = YES;
56.  
    //是否显示坐标轴
57.  
    lineChart.showCoordinateAxis = NO;
58.  
    //开始绘制折线图
59.  
    [lineChart strokeChart];
60.  
     
61.  
    //将折线图添加到视图上
62.  
    [self.view addSubview:lineChart];

2.柱状图

 

这个地方y轴的文字高度有在PNChart代码内部调整。

PNBarChart主要属性代码展示：

1.  
   //初始化一个柱状图
2.  
   PNBarChart *barChart = [[PNBarChart alloc] initWithFrame:CGRectMake(0, 64, SCREEN_WIDTH, 200)];
3.  
   //设置x的值
4.  
   [barChart setXLabels:@[@"SEP 1",@"SEP 2",@"SEP 3",@"SEP 4",@"SEP 5"]];
5.  
   //设置y的值
6.  
   [barChart setYValues:@[@1, @10, @2, @6, @3]];
7.  
   //设置是否显示坐标轴
8.  
   barChart.showChartBorder = YES;
9.  
   //设置柱子的圆角
10.  
    barChart.barRadius = 5;
11.  
    //设置柱子的宽度
12.  
    barChart.barWidth = 40;
13.  
    //设置渲染颜色
14.  
    barChart.strokeColor = [UIColor colorWithRed:51/255. green:121/255. blue:242/255. alpha:1];
15.  
    //设置是否立体显示（有一个渐变色的效果）
16.  
    barChart.isGradientShow = NO;
17.  
    //设置是否显示数值
18.  
    barChart.isShowNumbers = NO;
19.  
    //开始绘制图标
20.  
    [barChart strokeChart];
21.  
    [self.view addSubview:barChart];

 

3.环状图

显示百分比 

显示美元 

显示浮点数 

 

PNCircleChart相对比较简单，主要的几个属性在init的过程中就设置了。

1.  
   //初始化一个环状图
2.  
   PNCircleChart *circleChart = [[PNCircleChart alloc] initWithFrame:CGRectMake(0, 74, 200, 200) total:@100 current:@10 clockwise:YES shadow:YES shadowColor:[UIColor lightGrayColor] displayCountingLabel:YES overrideLineWidth:@20];
3.  
   circleChart.center = self.view.center;
4.  
   //设置环状图的类型（显示百分比等）
5.  
   circleChart.chartType = PNChartFormatTypePercent;
6.  
   //设置环状图的渲染颜色
7.  
   circleChart.strokeColor = [UIColor colorWithRed:51/255. green:121/255. blue:242/255. alpha:1];
8.  
   //绘制环状图
9.  
   [circleChart strokeChart];
10.  
     
11.  
    [self.view addSubview:circleChart];

4.饼状图

 

饼状图这里我用了三原色的原色，看起来可能有点辣眼睛，观影出现不适本人概不负责···

 

饼状图最重要的参数就是一个盛放item的数组。在init之前需要准备好。

另外一个独有的就是 图例 视图。

1.  
   //初始化一个饼状图
2.  
   //设置饼状图的数据数组
3.  
   NSArray *items = @[[PNPieChartDataItem dataItemWithValue:20 color:[UIColor redColor] description:@"颜华"],[PNPieChartDataItem dataItemWithValue:40 color:[UIColor greenColor] description:@"佳佳"],[PNPieChartDataItem dataItemWithValue:40 color:[UIColor blueColor] description:@"小徐"]];
4.  
   //初始化
5.  
   PNPieChart *pieChart = [[PNPieChart alloc] initWithFrame:CGRectMake(0, 64, 200, 200) items:items];
6.  
   pieChart.center = self.view.center;
7.  
   //获得图例
8.  
   UIView *legend = [pieChart getLegendWithMaxWidth:100];
9.  
   legend.frame = CGRectMake(50, self.view.frame.size.height / 2, legend.bounds.size.width, legend.bounds.size.height);
10.  
    [self.view addSubview:legend];
11.  
    //设置是否显示图例
12.  
    pieChart.hasLegend = YES;
13.  
    //设置图例样式
14.  
    pieChart.legendStyle = PNLegendItemStyleSerial;
15.  
    //设置图例位置
16.  
    pieChart.legendPosition = PNLegendPositionTop;
17.  
    //绘制饼状图
18.  
    [pieChart strokeChart];
19.  
     
20.  
    [self.view addSubview:pieChart];

当然我只是基本的把这些视图做出来了，我还有很多内涵的东西并不熟悉，

所以希望朋友们有什么要教我的告诉我的可以与我分享，

也欢迎指出错误，方便我改正。谢谢（行跪拜礼）~

 

因为不常在博客上，有些问题无法及时回复，大家可以添加我的微信交流问题~