一个流畅的iOS图表框架PNChart

1,158 阅读2分钟

首先祭出此控件的网站https://github.com/kevinzhow/PNChart;

最近公司的项目中有使用到原生的柱状图,然而自己封装的图在大量数据面前竟然怂了,一划一卡,如此的不流畅,对于一个处女座的iOS程序员来说是很糟心的事情啊。索性在网上搜索了会发现两个不错的图标框架,Charts和PNChart前者适合Swift(当然也可以将它桥接到OC,不过个人感觉这样的方法很鸡肋)后者有Swift和OC版。那当然选择后者啦。 下面开始导入此框架 方法一:简单暴直接 pod install 具体方法参照github上的说明 方法二:手动导入,此处有点坑,当我习惯性的将PNChart-master解压后其中的中的PNChart拖到工程中时。编译。。。竟然报错:主要是#import"PNRadarChartDataItem.h"中的问题于是乎搜索了一番找到了个解决方案:首先登陆全球最大的同性交友网站github搜索到UICountingLabel解压后把UICountingLabel的.m和.h文件拖入工程然后 把报错的#import<UICountingLabel/UICountingLabel.h>头文件换为#import"UICountingLabel.h"再次编译,完全没有问题。 开始使用: 首先当然是引入头文件啦,在需要用到图表的地方引入#import"PNChart.h" 然后参照官方的demo

 self.barChart = [[PNBarChart alloc] initWithFrame:CGRectMake(0, 135.0, SCREEN_WIDTH, 200.0)];
//        self.barChart.showLabel = NO;
        self.barChart.yLabelFormatter = ^(CGFloat yValue) {
            return [barChartFormatter stringFromNumber:@(yValue)];
        };

        self.barChart.yChartLabelWidth = 20.0;
        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;
        self.barChart.showChartBorder = YES;
        [self.barChart setXLabels:@[@"2", @"3", @"4", @"5", @"2", @"3", @"4", @"5"]];
//       self.barChart.yLabels = @[@-10,@0,@10];
//        [self.barChart setYValues:@[@10000.0,@30000.0,@10000.0,@100000.0,@500000.0,@1000000.0,@1150000.0,@2150000.0]];
        [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 = NO;
        self.barChart.isShowNumbers = NO;
        [self.barChart strokeChart];
        self.barChart.delegate = self;
        [self.view addSubview:self.barChart];

然而当运行出来时发现 X坐标呢? X坐标的数据去哪了 找了找发现是demo中的self.barChart.labelMarginTop = 5.0;问题,修改即可。

随后将控件正式封装到工程中 然而

截图1
![截图2](http://upload-images.jianshu.io/upload_images/2461189-5061d28339e39bda.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
这是什么鬼 还能不能快乐的玩耍了 不就是多了几条数据吗 找了找发现没有让图标滑动的方法于是加了一个UIScrollView 然而X轴和Y轴的数据呢当然是是需要处理下啊 开始很笨的写了一个方法 将X轴的数组每隔3个放入一个时间数据,的确没有问题,但是Y轴呢,会动将空的字符串转为0 于是乎还是一样的丑 随后百度了一番并没有想要的结果只好苦逼的在PNBarChart中搜寻,这对于一个英语不是强项的人来说很蛋疼。 不过好在找到了 self.barChart.yLabelSumY轴显示多少个标签 self.barChart.xLabelSkipX轴间隔多少个显示 这两个方法就很人性化了 修饰过后顿时感觉好看多了
截图3