金融类App项目经常用到的IOS图表库PNChart

PNChart简介

 

在做金融类项目时候,股票,借贷,支付,理财等App经常用到图表展示,PNChart目前来说是GitHub上Star最多的一个图表库之一,有Object-c版和Swift版,展示出的图形也非常漂亮,

 

 

在介绍这款开源库之前,大师兄选股一贯的作风是首先介绍一下这个库的作者。不查不知道,一查吓一跳,92年的CEO的作品–周楷雯(Kevin),广州趣拼信息科技有限公司CEO

 

 

Kevin:PNChart 是我 2013 年的时候重写 Piner 那款产品而做的,因为对动画和设计有着比较高的要求,发布后迅速聚集了大量 Star,并连续两周在 Github趋势的Objective-C语言分类排名第一,至今已经有很多国际友人做了贡献,以至于我想加点新功能都得重新读一遍,并修修他们留给我的坑(笑)。

注册公司资本才13万,后来被几千万收购,也是太牛了

 

PNChart是一个简单漂亮的动画图表库,Piner 和 CoinsMan 的 iOS 客户端中使用了这个框架。Swift 版本(开源链接:https://github.com/kevinzhow/PNChart-Swift)。

 

PNChart支持的图形

PNChart支持以下图形:折线图 柱状图 圆形加载  饼图扇形图  气泡图 雷达图 等多种图形

 

PNChart系统要求

PNChart 适用于 iOS 7.0 或更高版本,与 ARC 项目兼容。如果需要支持 iOS 6 ,请使用 0.8.1 版本之前的 PNChart 。注意 0.8.2 版本仅支持 iOS 8.0+ ,0.8.3 及更新版本支持 iOS 7.0+ 。

PNChart 依赖于下列框架,这些框架已经嵌入了 Xcode 开发工具:

Foundation.framework
UIKit.framework
CoreGraphics.framework
QuartzCore.framework
你需要 LLVM 3.0 或更高版本来建立 PNChart 。

 

Pod安装

通过 CocoaPods 安装(推荐):
1、在你的 Podfile 文件中添加 pod ‘PNChart’ 。

2、运行 pod install 进行安装。

3、按需导入头文件 #import “PNChart.h” 。

手动安装:
拷贝 PNChart 文件夹到你的工程中。

 

PNChart使用示例

折线图

代码示例

#import "PNChart.h"

//For Line Chart
PNLineChart * lineChart = [[PNLineChart alloc] initWithFrame:CGRectMake(0, 135.0, SCREEN_WIDTH, 200.0)];
[lineChart setXLabels:@[@"SEP 1",@"SEP 2",@"SEP 3",@"SEP 4",@"SEP 5"]];

// Line Chart No.1
NSArray * data01Array = @[@60.1, @160.1, @126.4, @262.2, @186.2];
PNLineChartData *data01 = [PNLineChartData new];
data01.color = PNFreshGreen;
data01.itemCount = lineChart.xLabels.count;
data01.getData = ^(NSUInteger index) {
    CGFloat yValue = [data01Array[index] floatValue];
    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];
};

lineChart.chartData = @[data01, data02];
[lineChart strokeChart];

 

柱状图

 

 

代码示例

static NSNumberFormatter *barChartFormatter;
        if (!barChartFormatter) {
            barChartFormatter = [[NSNumberFormatter alloc] init];
            barChartFormatter.numberStyle = NSNumberFormatterCurrencyStyle;
            barChartFormatter.allowsFloats = NO;
            barChartFormatter.maximumFractionDigits = 0;
        }
        self.titleLabel.text = @"Bar Chart";

        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];

圆形加载进度图

代码示例

self.titleLabel.text = @"Circle Chart";


        self.circleChart = [[PNCircleChart alloc] initWithFrame:CGRectMake(0, 150.0, SCREEN_WIDTH, 100.0)
                                                          total:@100
                                                        current:@60
                                                      clockwise:YES];

        self.circleChart.backgroundColor = [UIColor whiteColor];

        [self.circleChart setStrokeColor:[UIColor clearColor]];
        [self.circleChart setStrokeColorGradientStart:[UIColor blueColor]];
        [self.circleChart strokeChart];

        [self.view addSubview:self.circleChart];

饼图,扇形图

代码示例

self.titleLabel.text = @"Pie Chart";
        self.leftSwitch.hidden = NO;
        self.rightSwitch.hidden = NO;
        self.leftLabel.hidden = NO;
        self.rightLabel.hidden = NO;
        self.centerSwitch.hidden = NO;
        self.centerSwitchLabel.hidden = NO;


        NSArray *items = @[[PNPieChartDataItem dataItemWithValue:10 color:PNLightGreen],
                [PNPieChartDataItem dataItemWithValue:20 color:PNFreshGreen description:@"WWDC"],
                [PNPieChartDataItem dataItemWithValue:40 color:PNDeepGreen description:@"GOOG I/O"],
        ];

        self.pieChart = [[PNPieChart alloc] initWithFrame:CGRectMake((CGFloat) (SCREEN_WIDTH / 2.0 - 100), 135, 200.0, 200.0) items:items];
        self.pieChart.descriptionTextColor = [UIColor whiteColor];
        self.pieChart.descriptionTextFont = [UIFont fontWithName:@"Avenir-Medium" size:11.0];
        self.pieChart.descriptionTextShadowColor = [UIColor clearColor];
        self.pieChart.showAbsoluteValues = NO;
        self.pieChart.showOnlyValues = NO;
        [self.pieChart strokeChart];


        self.pieChart.legendStyle = PNLegendItemStyleStacked;
        self.pieChart.legendFont = [UIFont boldSystemFontOfSize:12.0f];

        UIView *legend = [self.pieChart getLegendWithMaxWidth:200];
        [legend setFrame:CGRectMake(130, 350, legend.frame.size.width, legend.frame.size.height)];
        [self.view addSubview:legend];

        [self.view addSubview:self.pieChart];

气泡图

代码示例

self.animationsSwitch.hidden = YES;

        self.titleLabel.text = @"Scatter Chart";

        self.scatterChart = [[PNScatterChart alloc] initWithFrame:CGRectMake((CGFloat) (SCREEN_WIDTH / 6.0 - 30), 135, 280, 200)];
//        self.scatterChart.yLabelFormat = @"xxx %1.1f";
        [self.scatterChart setAxisXWithMinimumValue:20 andMaxValue:100 toTicks:6];
        [self.scatterChart setAxisYWithMinimumValue:30 andMaxValue:50 toTicks:5];
        [self.scatterChart setAxisXLabel:@[@"x1", @"x2", @"x3", @"x4", @"x5", @"x6"]];
        [self.scatterChart setAxisYLabel:@[@"y1", @"y2", @"y3", @"y4", @"y5"]];

        NSArray *data01Array = [self randomSetOfObjects];
        PNScatterChartData *data01 = [PNScatterChartData new];
        data01.strokeColor = PNGreen;
        data01.fillColor = PNFreshGreen;
        data01.size = 2;
        data01.itemCount = [data01Array[0] count];
        data01.inflexionPointStyle = PNScatterChartPointStyleCircle;
        __block NSMutableArray *XAr1 = [NSMutableArray arrayWithArray:data01Array[0]];
        __block NSMutableArray *YAr1 = [NSMutableArray arrayWithArray:data01Array[1]];

        data01.getData = ^(NSUInteger index) {
            CGFloat xValue;
            xValue = [XAr1[index] floatValue];
            CGFloat yValue = [YAr1[index] floatValue];
            return [PNScatterChartDataItem dataItemWithX:xValue AndWithY:yValue];
        };

        [self.scatterChart setup];
        self.scatterChart.chartData = @[data01];
/***    
        this is for drawing line to compare
        CGPoint start = CGPointMake(20, 35);
        CGPoint end = CGPointMake(80, 45);
        [self.scatterChart drawLineFromPoint:start ToPoint:end WithLineWith:2 AndWithColor:PNBlack];
***/
        self.scatterChart.delegate = self;
        self.changeValueButton.hidden = YES;
        [self.view addSubview:self.scatterChart];

雷达图

代码示例

self.titleLabel.text = @"Radar Chart";

        self.leftSwitch.hidden = NO;
        self.rightSwitch.hidden = NO;
        self.leftLabel.hidden = NO;
        self.rightLabel.hidden = NO;
        self.leftLabel.text = @"Labels Style";
        self.rightLabel.text = @"Graduation";


        NSArray *items = @[[PNRadarChartDataItem dataItemWithValue:3 description:@"Art"],
                [PNRadarChartDataItem dataItemWithValue:2 description:@"Math"],
                [PNRadarChartDataItem dataItemWithValue:8 description:@"Sports"],
                [PNRadarChartDataItem dataItemWithValue:5 description:@"Literature"],
                [PNRadarChartDataItem dataItemWithValue:4 description:@"Other"],
        ];
        self.radarChart = [[PNRadarChart alloc] initWithFrame:CGRectMake(0, 135.0, SCREEN_WIDTH, 300.0) items:items valueDivider:1];

        self.radarChart.plotColor = [UIColor redColor];

        [self.radarChart strokeChart];

        [self.view addSubview:self.radarChart];

开源协议

PNChart 在 MIT开源协议 下可以使用,也就是说,只要在项目副本中包含了版权声明和许可声明,用户就可以使用 PNChart 做任何想做的事情,而 PNChart 也无需承担任何责任。可以通过查看 LICENSE 文件来获取更多相关信息。

 

下载地址

GitHub https://github.com/kevinzhow/PNChart

本地下载

 

 

分享到:

评论已关闭