用PNChart生成簡潔的的iOS圖表 帶動畫效果

PNChart 可以在 iOS 下實現效果不錯的曲線圖和柱狀圖,可以動態生成圖表。本文我們來簡單看一下 PNChart生成簡潔高效有動畫效果的iOS圖表庫。

先來看看PNChart的示意圖

用PNChart生成簡潔的的iOS圖表 帶動畫效果


導入
pod導入相對簡單,要手動導入這個庫,先下載下來(https://github.com/kevinzhow/PNChart),解壓後把PNChart文件夾拖入工程中
運行發現#import"PNRadarChartDataItem.h"報紅,在它的.h文件裏引入#import頭文件;#import報錯,下載UICountingLabel(https://github.com/dataxpress/UICountingLabel)解壓後把UICountingLabel的.m和.h文件拖入工程,把報錯的#import頭文件換爲#import"UICountingLabel.h"
專案中引用頭文件#import"PNChart.h"
折線圖
PNLineChart * lineChart = [[PNLineChartalloc]initWithFrame:CGRectMake(0,135.0,SCREEN_WIDTH,200.0)];
//X軸數據
[lineChart setXLabels:@[@"SEP 1",@"SEP 2",@"SEP 3",@"SEP 4",@"SEP 5"]];

//Y軸數據
NSArray * data01Array =@[@60.1,@160.1,@126.4,@262.2,@186.2];
PNLineChartData *data01 = [PNLineChartDatanew];
data01.color = PNFreshGreen;
data01.itemCount = lineChart.xLabels.count;
data01.getData = ^(NSUInteger index) {
CGFloat yValue = [data01Array[index] floatValue];
return [PNLineChartDataItemdataItemWithY:yValue];
};

//可以添加多條折線
NSArray * data02Array =@[@20.1,@180.1,@26.4,@202.2,@126.2];
PNLineChartData *data02 = [PNLineChartDatanew];
data02.color = PNTwitterColor;
data02.itemCount = lineChart.xLabels.count;
data02.getData = ^(NSUInteger index) {
CGFloat yValue = [data02Array[index] floatValue];
return [PNLineChartDataItemdataItemWithY:yValue];
};

lineChart.chartData = @[data01, data02];
[lineChart strokeChart];
//載入在視圖上
[self.windowaddSubview:lineChart];
柱狀圖
PNBarChart * barChart = [[PNBarChartalloc]initWithFrame:CGRectMake(0,135.0,SCREEN_WIDTH,200.0)];
//X軸數據
[barChart setXLabels:@[@"SEP 1",@"SEP 2",@"SEP 3",@"SEP 4",@"SEP 5"]];
//Y軸數據
[barChart setYValues:@[@1, @10,@2,@6,@3]];
[barChart strokeChart];

//載入在視圖上
[self.windowaddSubview:barChart];
餅狀圖
PNPieChart *pieChart = [[PNPieChartalloc]initWithFrame:CGRectMake(40.0,155.0,240.0,240.0)items:items];
//餅狀圖文字顔色
pieChart.descriptionTextColor = [UIColorwhiteColor];
pieChart.descriptionTextFont = [UIFontfontWithName:@"Avenir-Medium"size:14.0];
//繪制
[pieChart strokeChart];

//載入在視圖上
[self.windowaddSubview:pieChart];
圓形進度條
// total參數是進度條的總數據量,current是當前的數據量,closewise是繪制方向,YES是從左到右,NO爲從右到左
PNCircleChart *circleChart = [[PNCircleChartalloc]initWithFrame:CGRectMake(40.0,155.0,240.0,240.0)total:@100current:@30clockwise:NO];

//繪制圖形
[circleChart strokeChart];

//載入在視圖上
[self.windowaddSubview:circleChart];



PNChart簡單帶有動畫效果的圖表庫實例

用PNChart生成簡潔的的iOS圖表 帶動畫效果

需要
PNChart支持iOS6.0以上系統,使用ARC。使用需要安裝以下框架:
Foundation
UIKit
CoreGraphics
QuartzCore
用法
複制PNChart文件夾到工程中
#import "PNChart.h"

//For LineChart
PNChart * lineChart = [[PNChart alloc] initWithFrame:CGRectMake(0, 75.0, SCREEN_WIDTH, 200.0)];
[lineChart setXLabels:@[@"SEP 1",@"SEP 2",@"SEP 3",@"SEP 4",@"SEP 5"]];
[lineChart setYValues:@[@"1",@"10",@"2",@"6",@"3"]];
[lineChart strokeChart];
//For BarChart
PNChart * barChart = [[PNChart alloc] initWithFrame:CGRectMake(0, 75.0, SCREEN_WIDTH, 200.0)];
barChart.type = PNBarType;
[barChart setXLabels:@[@"SEP 1",@"SEP 2",@"SEP 3",@"SEP 4",@"SEP 5"]];
[barChart setYValues:@[@"1",@"10",@"2",@"6",@"3"]];
[barChart strokeChart];
//By strokeColor you can change the chart color
[barChart setStrokeColor:PNTwitterColor];

更多相關文章
  • 本文章給大家介紹一篇關于iOS 畫面切換的各種動畫效果附私有API,希望此教程對大家會有所幫助哦.ios的畫面切換的動畫效果的API主要通過調用系統已定義的動畫效果實現,這些效果已基本囊括開發的需求,如果需要更加複雜的效果,可以考慮CATransition來實現以下是基本的四種效果kCATransi ...
  • 本文我們介紹一下IOS開發UI中的核心動畫基礎知識,本文主要內容是講CALayer動畫框架,圖層變換,專用圖層等.CALayer包含在QuartzCore框架中,這是一個跨平台的框架,既可以用在iOS中又可以用在Mac OS X中.在iOS中CALayer的設計主要是了爲了內容展示和動畫操作,CAL ...
  • ChartSQL輕松讓你SQL語句生成圖表
    ChartSQL可以用你的SQL查詢語句生成圖片,ChartSQL的圖表結果通過SVG的渲染方式嵌入到網頁中,並直接在浏覽器上顯示出來.ChartSQL 可以讓你用 SQL 語句來生成圖表,圖表可使用 SVG 向量圖進行渲染,可輕松的嵌入到網頁中.ChartSQL 可以通過 FnordMetric
  • Circliful簡約的圓形統計圖表jQuery插件
    下面我們一起來看一篇非常不錯的Circliful簡約的圓形統計圖表jQuery插件使用方法
  • 我們知道網站地址有利于搜索引擎的收錄,wordpress有自帶的xml格式的網站地圖,如果我們也希望生成txt格式的地圖呢?本文我們用純代碼方法來實現.該方法不需要安裝任何插件,純代碼生成.<?php require('./wp-blog-header.php'); header('Conte ...
  • 在jquery中ajax 提交表單我們可以直接使用$.post或$.ajax 進行提交了,下面小編來給大家介紹一下ajax提交表單實例.最簡單就這樣 代碼如下 $.post("/index.php?action=ajax&rs=TWProAjax::checkProTermsExi ...
  • 常用的JavaScript檢測浏覽器爲IE是哪個版本的代碼.包括是否是最人極端厭惡的ie6識別與檢測.具體方法 代碼如下 var isIE=!!window.ActiveXObject;var isIE6=isIE&&!window.XMLHttpRequest;var isIE8= ...
  • 下面來看看關于xcode載入圖片點擊事件,圖片帶參數,希望這個例子能幫助到各位同學哦.clickx 作爲一個方法被調用,表示當你點擊圖片的時候出發這個方法,這個方法可以自己隨便寫比如abc,clicky 代碼如下 -
一周排行