一个流畅的iOS图表框架PNChart

最新推荐文章于 2024-09-03 07:14:34 发布

weixin_34040079

最新推荐文章于 2024-09-03 07:14:34 发布

阅读量303

点赞数

CC 4.0 BY-SA版权

文章标签： swift

原文链接：https://juejin.im/post/5a3b1c2ef265da430d582cc0

本文介绍如何在iOS项目中使用PNChart实现流畅的柱状图展示，并分享了解决图表显示问题的经验，包括导入方法、图表配置及优化技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先祭出此控件的网站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;问题，修改即可。

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

这是什么鬼还能不能快乐的玩耍了不就是多了几条数据吗找了找发现没有让图标滑动的方法于是加了一个UIScrollView 然而X轴和Y轴的数据呢当然是是需要处理下啊开始很笨的写了一个方法将X轴的数组每隔3个放入一个时间数据，的确没有问题，但是Y轴呢，会动将空的字符串转为0 于是乎还是一样的丑随后百度了一番并没有想要的结果只好苦逼的在PNBarChart中搜寻，这对于一个英语不是强项的人来说很蛋疼。不过好在找到了 self.barChart.yLabelSumY轴显示多少个标签 self.barChart.xLabelSkipX轴间隔多少个显示这两个方法就很人性化了修饰过后顿时感觉好看多了