?9
圖片發(fā)自簡書App
前言
從2016年4月14日開始震肮，本人著手開發(fā)了JHChart圖表工具庫称龙。經(jīng)過斷斷續(xù)續(xù)的開發(fā)，截止到現(xiàn)在戳晌，已經(jīng)實現(xiàn)了折線圖鲫尊、柱狀圖、餅狀圖沦偎、環(huán)形圖和表格樣式的圖表功能疫向。為了方便使用，我已經(jīng)將一個簡單的demo上傳到github上面豪嚎，但是這些顯然不夠搔驼，我們還需要一個更加明了的方式介紹這個庫的用法，打造出各種我們需要的效果侈询，下面我們開始教程
集成JHChart
集成JHChart有兩種方法
第一種簡單用法簡單且版本保持最新舌涨，直接去demo中將JHChart庫文件夾拖入你的項目中即可
第二種使用cocoapod導(dǎo)入(版本可能非最新)，在Podfile中插入如下代碼:
pod 'JHChart','~> 1.0.1'
(如果對cocoapods使用不熟悉扔字，可以去官網(wǎng)細(xì)細(xì)琢磨囊嘉，在這里就不過多贅述了。)
經(jīng)過上面的集成革为，編譯一下扭粱，如果沒有報錯就成功將代碼庫引入項目了，如果有報錯震檩，請再仔細(xì)查看相關(guān)步驟是否正確哦琢蛤。
JHChart簡介
JHChart的圖表主要類庫及樣式包括：
JHLineChart 折線/曲線圖類庫
JHColumnChart 柱狀圖
JHPieChart 餅狀圖
JHRingChart 環(huán)狀圖
JHTableChart 表格圖
JHRadarChart 雷達圖
構(gòu)建折線/曲線圖 --JHLineChart
描述：JHLineChart可以創(chuàng)建數(shù)據(jù)源多樣的線性圖表，包括折線和曲線圖抛虏，可以根據(jù)數(shù)據(jù)源判斷是否為多條線性表博其。并且，可以根據(jù)需求設(shè)置是否有區(qū)間填充顏色嘉蕾。同時該表支持不同象限的不同需求贺奠，這里只是設(shè)置了第一象限的示例，其他象限使用方法一致错忱。
/*? ? ? ? 創(chuàng)建表對象? ? ? ? */JHLineChart *lineChart = [[JHLineChart alloc] initWithFrame:CGRectMake(10,100, k_MainBoundsWidth-20,300) andLineChartType:JHChartLineValueNotForEveryX];/* X軸的刻度值 可以傳入NSString或NSNumber類型? 并且數(shù)據(jù)結(jié)構(gòu)隨折線圖類型變化而變化 詳情看文檔或其他象限X軸數(shù)據(jù)源示例*/lineChart.xLineDataArr = @[@"0",@"1",@"2",@3,@4,@5,@6,@7];/* 折線圖的不同類型? 按照象限劃分 不同象限對應(yīng)不同X軸刻度數(shù)據(jù)源和不同的值數(shù)據(jù)源 */lineChart.lineChartQuadrantType = JHLineChartQuadrantTypeFirstQuardrant;/* 數(shù)據(jù)源數(shù)組 如果是一組數(shù)據(jù) 只需一個數(shù)組 如果是多組數(shù)據(jù) 需要傳入多組數(shù)據(jù) */lineChart.valueArr = @[@[@"1",@"12",@"1",@6,@4,@9,@6,@7],@[@"3",@"1",@"2",@16,@2,@3,@5,@10]];/* 值折線的折線顏色 默認(rèn)暗黑色*/lineChart.valueLineColorArr =@[ [UIColorpurpleColor], [UIColorbrownColor]];/* 值點的顏色 默認(rèn)橘黃色*/lineChart.pointColorArr = @[[UIColororangeColor],[UIColoryellowColor]];/* X和Y軸的顏色 默認(rèn)暗黑色 */lineChart.xAndYLineColor = [UIColorblackColor];/* XY軸的刻度顏色 m */lineChart.xAndYNumberColor = [UIColorblueColor];/* 坐標(biāo)點的虛線顏色 */lineChart.positionLineColorArr = @[[UIColorblueColor],[UIColorgreenColor]];/*? ? ? ? 設(shè)置是否填充內(nèi)容 默認(rèn)為否? ? ? ? */lineChart.contentFill =YES;/*? ? ? ? 設(shè)置為曲線路徑? ? ? ? */lineChart.pathCurve =YES;/*? ? ? ? 設(shè)置填充顏色數(shù)組? ? ? ? */lineChart.contentFillColorArr = @[[UIColorcolorWithRed:0.500green:0.000blue:0.500alpha:0.468],[UIColorcolorWithRed:0.500green:0.214blue:0.098alpha:0.468]];[self.view addSubview:lineChart];/*? ? ? ? 開始動畫? ? ? ? */[lineChart showAnimation];
效果圖：
折線圖
構(gòu)建柱狀圖 --JHColumnChart
描述：JHColumnChart是一個可滾動的柱狀圖儡率，您可以設(shè)置靈活的數(shù)據(jù)源數(shù)組來繪制您需要的樣式，它不僅支持設(shè)置不同的柱狀體顏色以清，還給您提供了多個描述屬性儿普，用來標(biāo)記不同的樣式
/*? ? ? ? 創(chuàng)建對象? ? ? ? */JHColumnChart *column = [[JHColumnChart alloc] initWithFrame:CGRectMake(0,100, k_MainBoundsWidth, k_MainBoundsWidth)];/*? ? ? ? 創(chuàng)建數(shù)據(jù)源數(shù)組 每個數(shù)組即為一個模塊數(shù)據(jù) 例如第一個數(shù)組可以表示某個班級的不同科目的平均成績 下一個數(shù)組表示另外一個班級的不同科目的平均成績? ? ? ? */column.valueArr = @[? ? ? ? ? ? ? ? ? ? @[@12,@15,@20],? ? ? ? ? ? ? ? ? ? @[@22,@15,@20],? ? ? ? ? ? ? ? ? ? @[@12,@5,@40],? ? ? ? ? ? ? ? ? ? @[@2,@15,@20]? ? ? ? ? ? ? ? ? ? ];/*? ? ? 該點 表示原點距左下角的距離? ? ? ? */column.originSize =CGPointMake(30,30);/*? ? ? ? 第一個柱狀圖距原點的距離? ? ? ? */column.drawFromOriginX =10;/*? ? ? ? 柱狀圖的寬度? ? ? ? */column.columnWidth =40;/*? ? ? ? X、Y軸字體顏色? ? ? ? */column.drawTextColorForX_Y = [UIColorgreenColor];/*? ? ? ? X掷倔、Y軸線條顏色? ? ? ? */column.colorForXYLine = [UIColorgreenColor];/*? ? ? ? 每個模塊的顏色數(shù)組 例如A班級的語文成績顏色為紅色 數(shù)學(xué)成績顏色為綠色? ? ? ? */column.columnBGcolorsArr = @[[UIColorredColor],[UIColorgreenColor],[UIColororangeColor]];/*? ? ? ? 模塊的提示語? ? ? ? */column.xShowInfoText = @[@"A班級",@"B班級",@"C班級",@"D班級"];/*? ? ? ? 開始動畫? ? ? ? */[column showAnimation];[self.view addSubview:column];
效果如下：
柱狀圖
餅狀圖 --JHPieChart
描述：JHPieChart可根據(jù)您的數(shù)據(jù)源和視圖大小設(shè)置眉孩，自動生成大小合適，并且有提示動畫的餅狀圖。當(dāng)您點擊某塊餅狀圖時浪汪，會動畫顯示當(dāng)前的餅塊信息巴柿。
JHPieChart *pie = [[JHPieChart alloc]initWithFrame:CGRectMake(100,100,321,421)];pie.center = CGPointMake(CGRectGetMaxX(self.view.frame)/2, CGRectGetMaxY(self.view.frame)/2);/* 餅狀圖數(shù)值 會自動根據(jù)數(shù)值計算百分比 */pie.valueArr = @[@18,@10,@25,@40,@18,@10,@25,@40,@18,@10,@15,@12,@30,@18];/* 每一個扇形區(qū)的描述 必須要填 并且數(shù)量必須和餅狀圖數(shù)值個數(shù)相同 */pie.descArr = @[@"第一個元素",@"第二個元素",@"第三個元素",@"第四個元素",@"5",@"6",@"7",@"8",@"9",@"10",@"23",@"12",@"21",@"30"];pie.backgroundColor = [UIColor whiteColor];[self.viewaddSubview:pie];/*? ? ? ? 觸碰某塊餅圖時動畫偏移值? ? ? ? */pie.positionChangeLengthWhenClick =15;/*? ? ? ? 動畫展示? ? ? ? */[pie showAnimation];
效果圖如下：
餅狀圖
環(huán)形圖 --JHRingChart
JHRingChart 根據(jù)您的數(shù)據(jù)源，自動計算相關(guān)數(shù)據(jù)比例死遭，動畫展示環(huán)狀圖广恢，并且從每個環(huán)段引出相關(guān)信息提示
/*? ? ? ? 創(chuàng)建對象? ? ? ? */JHRingChart *ring = [[JHRingChart alloc] initWithFrame:CGRectMake(0,100, k_MainBoundsWidth, k_MainBoundsWidth)];/*? ? ? ? 背景顏色? ? ? ? */ring.backgroundColor = [UIColorblackColor];/*? ? ? ? 數(shù)據(jù)源數(shù)組 只需要傳入值 相應(yīng)的比例會自動計算? ? ? ? */ring.valueDataArr = @[@"0.5",@"5",@"2",@"10",@"6"];/*? ? ? ? 環(huán)圖的寬度? ? ? ? */ring.ringWidth =35.0;/*? ? ? ? 每段環(huán)圖的填充顏色? ? ? ? */ring.fillColorArray = @[[UIColorcolorWithRed:1.000green:0.783blue:0.371alpha:1.000], [UIColorcolorWithRed:1.000green:0.562blue:0.968alpha:1.000],[UIColorcolorWithRed:0.313green:1.000blue:0.983alpha:1.000],[UIColorcolorWithRed:0.560green:1.000blue:0.276alpha:1.000],[UIColorcolorWithRed:0.239green:0.651blue:0.170alpha:1.000]];/*? ? ? ? 動畫展示? ? ? ? */[ring showAnimation];[self.view addSubview:ring];
效果圖如下：
環(huán)形圖
表格 --JHTableChart
描述：JHTableChart用于靜態(tài)繪制樣式多變的表格視圖，所有的單元格展示樣式取決于數(shù)據(jù)源呀潭，不需要特殊的處理某一個單元格钉迷，十分靈活易用
/*? ? ? ? 創(chuàng)建對象? ? ? ? */JHTableChart *table = [[JHTableChart alloc] initWithFrame:CGRectMake(10,64, k_MainBoundsWidth-20, k_MainBoundsHeight)];/*? ? ? ? 表名稱? ? ? ? */table.tableTitleString =@"全選jeep自由光";/*? ? ? ? 每一列的聲明 其中第一個如果需要分別顯示行和列的說明 可以用‘|’分割行和列? ? ? ? */table.colTitleArr = @[@"屬性|配置",@"外觀",@"內(nèi)飾",@"數(shù)量"];/*? ? ? ? 列的寬度數(shù)組 從第一列開始? ? ? ? */table.colWidthArr = @[@100.0,@120.0,@70,@100];/*? ? ? ? 表格體的文字顏色? ? ? ? */table.bodyTextColor = [UIColorredColor];/*? ? ? ? 最小的方格高度? ? ? ? */table.minHeightItems =40;/*? ? ? ? 表格的線條顏色? ? ? ? */table.lineColor = [UIColororangeColor];/*? ? ? ? 數(shù)據(jù)源數(shù)組 按照從上到下表示每行的數(shù)據(jù) 如果其中一行中某列存在多個單元格 可以再存入一個數(shù)組中表示? ? ? ? */table.dataArr = @[? ? ? ? ? ? ? ? ? @[@"2.4L優(yōu)越版",@"2016皓白標(biāo)準(zhǔn)漆藍棕",@[@"鴿子白",@"鵝黃",@"炫彩綠"],@[@"4"]],? ? ? ? ? ? ? ? ? @[@"2.4專業(yè)版",@[@"2016皓白標(biāo)準(zhǔn)漆藍棕",@"2016晶黑珠光漆黑",@"2016流沙金珠光漆藍棕"],@[@"鴿子白",@"鵝黃",@"炫彩綠",@"彩虹多樣色"],@[@"4",@"5",@"3"]],? ? ? ? ? ? ? ? ? @[@"2.4豪華版",@[@"4",@"3",@"2"]],? ? ? ? ? ? ? ? ? @[@"2.4旗艦版"]? ? ? ? ? ? ? ? ? ];/*? ? ? ? 顯示 無動畫效果? ? ? ? */[table showAnimation];[self.view addSubview:table];/*? ? ? ? 設(shè)置表格的布局 其中 [table heightFromThisDataSource] 為自動按照當(dāng)前數(shù)據(jù)源計算所需高度? ? ? ? */table.frame =CGRectMake(10,64, k_MainBoundsWidth-20, [table heightFromThisDataSource]);
效果圖：
表格圖
雷達圖 --JHRadarChart
** 描述：JHRadarChart用于靜態(tài)繪制雷達圖，所有的單元數(shù)據(jù)來自您的自定義數(shù)據(jù)源**
JHRadarChart *radarChart = [[JHRadarChart alloc] initWithFrame:CGRectMake(10,74, k_MainBoundsWidth -20, k_MainBoundsWidth -20)];radarChart.backgroundColor = [UIColorwhiteColor];/*? ? ? 每個頂點的描述文字? ? ? ? */radarChart.valueDescArray = @[@"擊殺",@"能力",@"生存",@"推塔",@"補兵",@"其他"];/*? ? ? ? 基本的分層個數(shù) 即刻度的個數(shù)? ? ? ? */radarChart.layerCount =5;/*? ? ? ? Array of data sources, the need to add an array of arrays? ? ? ? */radarChart.valueDataArray = @[@[@"80",@"40",@"100",@"76",@"75",@"50"],@[@"50",@"80",@"30",@"46",@"35",@"50"]];/*? ? ? ? 層的背景顏色 建議設(shè)置帶有透明度的顏色? ? ? ? */radarChart.layerFillColor = [UIColorcolorWithRed:94/256.0green:187/256.0blue:242/256.0alpha:0.5];/*? ? ? ? 具體展示對象的填充顏色? ? ? ? */radarChart.valueDrawFillColorArray = @[[UIColorcolorWithRed:57/256.0green:137/256.0blue:21/256.0alpha:0.5],[UIColorcolorWithRed:149/256.0green:68/256.0blue:68/256.0alpha:0.5]];/*? ? ? 展示? ? ? */[radarChart showAnimation];[self.view addSubview:radarChart];
效果圖：
some nice chart
轉(zhuǎn)載自：http://www.reibang.com/p/a6a14fb2f567
