JHChart iOS圖表工具庫1.0.3新版本詳解

圖片發(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.3'

(如果對cocoapods使用不熟悉，可以去官網(wǎng)細(xì)細(xì)琢磨，在這里就不過多贅述了。)

經(jīng)過上面的集成，編譯一下，如果沒有報錯就成功將代碼庫引入項目了，如果有報錯，請再仔細(xì)查看相關(guān)步驟是否正確哦。

JHChart簡介

JHChart的圖表主要類庫及樣式包括：

  • JHLineChart 折線/曲線圖類庫
  • JHColumnChart 柱狀圖
  • JHPieChart 餅狀圖
  • JHRingChart 環(huán)狀圖
  • JHTableChart 表格圖
  • JHRadarChart 雷達(dá)圖

工作日志如下：

  • 2016 ~
  • 4.14日上傳第一版 折線圖 包括不同的象限內(nèi)折線圖 將會持續(xù)更新 效果圖如下
  • 5.3日上傳更新版 新增了餅狀圖初稿
  • 6.5日添加了環(huán)狀圖
  • 8.8日添加了柱狀圖
  • 8.25日添加了表格圖
  • 9.1日添加折線圖的曲線樣式及內(nèi)容填充效果
  • 10.20添加了雷達(dá)圖
  • 11.30修復(fù)了多個bug
  • 12.13修復(fù)折線圖Y軸數(shù)值過大時顯示異常bug
  • 12.13發(fā)布cocoapod新版本1.0.3
    <p>

構(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 =@[ [UIColor purpleColor], [UIColor brownColor]];
/* 值點(diǎn)的顏色 默認(rèn)橘黃色*/
lineChart.pointColorArr = @[[UIColor orangeColor],[UIColor yellowColor]];
/* X和Y軸的顏色 默認(rèn)暗黑色 */
lineChart.xAndYLineColor = [UIColor blackColor];
/* XY軸的刻度顏色 m */
lineChart.xAndYNumberColor = [UIColor blueColor];
/* 坐標(biāo)點(diǎn)的虛線顏色 */
lineChart.positionLineColorArr = @[[UIColor blueColor],[UIColor greenColor]];
/*        設(shè)置是否填充內(nèi)容 默認(rèn)為否         */
lineChart.contentFill = YES;
/*        設(shè)置為曲線路徑         */
lineChart.pathCurve = YES;
/*        設(shè)置填充顏色數(shù)組         */
lineChart.contentFillColorArr = @[[UIColor colorWithRed:0.500 green:0.000 blue:0.500 alpha:0.468],[UIColor colorWithRed:0.500 green:0.214 blue:0.098 alpha: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]
                    ];
/*       該點(diǎn) 表示原點(diǎn)距左下角的距離         */
column.originSize = CGPointMake(30, 30);
/*        第一個柱狀圖距原點(diǎn)的距離         */
column.drawFromOriginX = 10;
/*        柱狀圖的寬度         */
column.columnWidth = 40;
/*        X、Y軸字體顏色         */
column.drawTextColorForX_Y = [UIColor greenColor];
/*        X、Y軸線條顏色         */
column.colorForXYLine = [UIColor greenColor];
/*        每個模塊的顏色數(shù)組 例如A班級的語文成績顏色為紅色 數(shù)學(xué)成績顏色為綠色         */
column.columnBGcolorsArr = @[[UIColor redColor],[UIColor greenColor],[UIColor orangeColor]];
/*        模塊的提示語         */
column.xShowInfoText = @[@"A班級",@"B班級",@"C班級",@"D班級"];
/*        開始動畫         */
[column showAnimation];
[self.view addSubview:column];

效果如下：


柱狀圖
柱狀圖

餅狀圖 --JHPieChart

描述：JHPieChart可根據(jù)您的數(shù)據(jù)源和視圖大小設(shè)置，自動生成大小合適，并且有提示動畫的餅狀圖。當(dāng)您點(diǎn)擊某塊餅狀圖時，會動畫顯示當(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.view addSubview: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 = [UIColor blackColor];
/*        數(shù)據(jù)源數(shù)組 只需要傳入值 相應(yīng)的比例會自動計算         */
ring.valueDataArr = @[@"0.5",@"5",@"2",@"10",@"6"];
/*        環(huán)圖的寬度         */
ring.ringWidth = 35.0;
/*        每段環(huán)圖的填充顏色         */
ring.fillColorArray = @[[UIColor colorWithRed:1.000 green:0.783 blue:0.371 alpha:1.000], [UIColor colorWithRed:1.000 green:0.562 blue:0.968 alpha:1.000],[UIColor colorWithRed:0.313 green:1.000 blue:0.983 alpha:1.000],[UIColor colorWithRed:0.560 green:1.000 blue:0.276 alpha:1.000],[UIColor colorWithRed:0.239 green:0.651 blue:0.170 alpha:1.000]];
/*        動畫展示         */
[ring showAnimation];
[self.view addSubview:ring];

效果圖如下：


環(huán)形圖
環(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 = [UIColor redColor];
/*        最小的方格高度         */
table.minHeightItems = 40;
/*        表格的線條顏色         */
table.lineColor = [UIColor orangeColor];
/*        數(shù)據(jù)源數(shù)組 按照從上到下表示每行的數(shù)據(jù) 如果其中一行中某列存在多個單元格 可以再存入一個數(shù)組中表示         */
table.dataArr = @[
                  @[@"2.4L優(yōu)越版",@"2016皓白標(biāo)準(zhǔn)漆藍(lán)棕",@[@"鴿子白",@"鵝黃",@"炫彩綠"],@[@"4"]],
                  @[@"2.4專業(yè)版",@[@"2016皓白標(biāo)準(zhǔn)漆藍(lán)棕",@"2016晶黑珠光漆黑",@"2016流沙金珠光漆藍(lán)棕"],@[@"鴿子白",@"鵝黃",@"炫彩綠",@"彩虹多樣色"],@[@"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]);

效果圖：


表格圖
表格圖

雷達(dá)圖 --JHRadarChart

** 描述：JHRadarChart用于靜態(tài)繪制雷達(dá)圖，所有的單元數(shù)據(jù)來自您的自定義數(shù)據(jù)源**

JHRadarChart *radarChart = [[JHRadarChart alloc] initWithFrame:CGRectMake(10, 74, k_MainBoundsWidth - 20, k_MainBoundsWidth - 20)];
radarChart.backgroundColor = [UIColor whiteColor];
/*       每個頂點(diǎn)的描述文字         */
radarChart.valueDescArray = @[@"擊殺",@"能力",@"生存",@"推塔",@"補(bǔ)兵",@"其他"];

/*         基本的分層個數(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 = [UIColor colorWithRed:94/ 256.0 green:187/256.0 blue:242 / 256.0 alpha:0.5];

/*        具體展示對象的填充顏色         */
radarChart.valueDrawFillColorArray = @[[UIColor colorWithRed:57/ 256.0 green:137/256.0 blue:21 / 256.0 alpha:0.5],[UIColor colorWithRed:149/ 256.0 green:68/256.0 blue:68 / 256.0 alpha:0.5]];

/*      展示       */
[radarChart showAnimation];

[self.view addSubview:radarChart];

效果圖：

some nice chart
some nice chart

結(jié)語<p>

到這里，我們已經(jīng)將JHChart中的每種樣式進(jìn)行了一次演示，你可以按照這種方式，將項目所需的圖表快速的生成出來。并且，JHChart將會持續(xù)更新，歡迎大家提出不同的需求和意見。喜歡的小伙伴可以給個?<p>

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容