JHChart(最新版本1.1.0)
nice chart
好吧，的確當前的github上已經存有不少的iOS圖表工具庫，然而，當公司的項目需要圖表時，幾乎沒有哪個第三方能夠完全滿足我的項目需求。無奈之下，本人不得不花費一些時間造輪子。
起先，我只打算寫一些折線圖和餅狀圖來滿足我的項目需求，沒想到的是，我將寫好的圖表放到github上后，有一些朋友告訴我他們想要更多的樣式，實在不忍心告訴他們我的圖標庫到此為止了，所以我就陸陸續續的寫了其他的圖表樣式。截止本文發布，JHChart已經發布了4個版本，每次發布的都添加的不少的改進和新意。并且以后，也會持續更新這個庫，希望能對需要的朋友有所幫助。
當然，如果對您有所幫助，可以給個 star 哦......您的 star 是我持續不斷更新的動力。
簡介
JHChart是一個使用簡單、樣式豐富、可自定義程度極高的iOS圖表工具庫。它可以幫助iOS開發者繪制出折線圖、柱狀圖、餅狀圖等等。
環境需求
- Xcode 7.0+
- iOS 7.0+
如何導入JHChart？
JHChart提供了兩種方式來導入：
直接從github上下載demo，將JHChart文件夾中的文件拖入項目中編譯即可
使用cocoapod導入：
pod 'JHChart','~>1.1.0'
(如果您不了解 cocoapods, 點擊這里 去官網學習一下哦.)
詳細使用簡介
折線圖 --JHLineChart
描述: JHLineChart可以創建數據源多樣的線性圖表，包括折線和曲線圖，可以根據數據源判斷是否為多條線性表。并且，可以根據需求設置是否有區間填充顏色。同時該表支持不同象限的不同需求，這里只是設置了第一象限的示例，其他象限使用方法一致。
/* Create object */
JHLineChart *lineChart = [[JHLineChart alloc] initWithFrame:CGRectMake(10, 100, k_MainBoundsWidth-20, 300) andLineChartType:JHChartLineValueNotForEveryX];
/* The scale value of the X axis can be passed into the NSString or NSNumber type and the data structure changes with the change of the line chart type. The details look at the document or other quadrant X axis data source sample.*/
lineChart.xLineDataArr = @[@"0",@"1",@"2",@3,@4,@5,@6,@7];
/* The different types of the broken line chart, according to the quadrant division, different quadrant correspond to different X axis scale data source and different value data source. */
lineChart.lineChartQuadrantType = JHLineChartQuadrantTypeFirstQuardrant;
lineChart.valueArr = @[@[@"1",@"12",@"1",@6,@4,@9,@6,@7],@[@"3",@"1",@"2",@16,@2,@3,@5,@10]];
/* Line Chart colors */
lineChart.valueLineColorArr =@[ [UIColor purpleColor], [UIColor brownColor]];
/* Colors for every line chart*/
lineChart.pointColorArr = @[[UIColor orangeColor],[UIColor yellowColor]];
/* color for XY axis */
lineChart.xAndYLineColor = [UIColor blackColor];
/* XY axis scale color */
lineChart.xAndYNumberColor = [UIColor blueColor];
/* Dotted line color of the coordinate point */
lineChart.positionLineColorArr = @[[UIColor blueColor],[UIColor greenColor]];
/* Set whether to fill the content, the default is False */
lineChart.contentFill = YES;
/* Set whether the curve path */
lineChart.pathCurve = YES;
/* Set fill color array */
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];
/* Start animation */
[lineChart showAnimation];
效果圖如下：
-
第一象限折線圖/曲線圖.
第一象限折線圖/曲線圖 -
第一四象限折線圖/曲線圖.
第一四象限折線圖/曲線圖 -
第一二象限折線圖/曲線圖.
第一二象限折線圖/曲線圖.
散點圖
描述：散點圖使用較為簡單，在此不做贅述，詳情可看demo
散點圖
柱狀圖 --JHColumnChart
描述：JHColumnChart是一個可滾動的柱狀圖，您可以設置靈活的數據源數組來繪制您需要的樣式，它不僅支持設置不同的柱狀體顏色，還給您提供了多個描述屬性，用來標記不同的樣式。
JHColumnChart *column = [[JHColumnChart alloc] initWithFrame:CGRectMake(0, 100, k_MainBoundsWidth, k_MainBoundsWidth)];
/* Create an array of data sources, each array is a module data. For example, the first array can represent the average score of a class of different subjects, the next array represents the average score of different subjects in another class */
column.valueArr = @[
@[@12,@15,@20],
@[@22,@15,@20],
@[@12,@5,@40],
@[@2,@15,@20],
@[@20,@15,@26]
];
/* This point represents the distance from the lower left corner of the origin. */
column.originSize = CGPointMake(30, 30);
/* The first column of the distance from the starting point */
column.drawFromOriginX = 10;
/* Column width */
column.columnWidth = 40;
/* X, Y axis font color */
column.drawTextColorForX_Y = [UIColor whiteColor];
/* X, Y axis line color */
column.colorForXYLine = [UIColor blackColor];
/* Each module of the color array, such as the A class of the language performance of the color is red, the color of the math achievement is green */
column.columnBGcolorsArr = @[[UIColor redColor],[UIColor greenColor],[UIColor orangeColor]];
/* Module prompt */
column.xShowInfoText = @[@"A班級",@"B班級",@"C班級",@"D班級",@"E班級"];
/* Start animation */
[column showAnimation];
[self.view addSubview:column];
效果圖如下：
-
分組的柱狀圖：
分組的柱狀圖 -
不分組的柱狀圖：
不分組柱狀圖 -
柱狀圖和折線圖混合：
柱狀圖折線圖混合
餅狀圖 --JHPieChart
描述：JHPieChart可根據您的數據源和視圖大小設置，自動生成大小合適，并且有提示動畫的餅狀圖。當您點擊某塊餅狀圖時，會動畫顯示當前的餅塊信息。
JHPieChart *pie = [[JHPieChart alloc] initWithFrame:CGRectMake(100, 100, 321, 421)];
pie.center = CGPointMake(CGRectGetMaxX(self.view.frame)/2, CGRectGetMaxY(self.view.frame)/2);
/* Pie chart value, will automatically according to the percentage of numerical calculation */
pie.valueArr = @[@18,@10,@25,@40,@18,@10,@25,@40,@18,@10,@15,@12,@30,@18];
/* The description of each sector must be filled, and the number must be the same as the pie chart. */
pie.descArr = @[@"第一個元素",@"第二個元素",@"第三個元素",@"第四個元素",@"5",@"6",@"7",@"8",@"9",@"10",@"23",@"12",@"21",@"30"];
pie.backgroundColor = [UIColor whiteColor];
[self.view addSubview:pie];
/* When touching a pie chart, the animation offset value */
pie.positionChangeLengthWhenClick = 15;
/* Start animation */
[pie showAnimation];
Actual effect chart：
餅狀圖
環形圖 --JHRingChart
描述：JHRingChart 根據您的數據源，自動計算相關數據比例，動畫展示環狀圖，并且從每個環段引出相關信息提示
JHRingChart *ring = [[JHRingChart alloc] initWithFrame:CGRectMake(0, 100, k_MainBoundsWidth, k_MainBoundsWidth)];
/* background color */
ring.backgroundColor = [UIColor whiteColor];
/* Data source array, only the incoming value, the corresponding ratio will be automatically calculated */
ring.valueDataArr = @[@"0.5",@"5",@"2",@"10",@"6"];
/* Width of ring graph */
ring.ringWidth = 35.0;
/* Fill color for each section of the ring diagram */
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]];
/* Start animation */
[ring showAnimation];
[self.view addSubview:ring];
效果圖如下：
環形圖
表格 --JHTableChart
描述：JHTableChart用于靜態繪制樣式多變的表格視圖，所有的單元格展示樣式取決于數據源，不需要特殊的處理某一個單元格，十分靈活易用
JHTableChart *table = [[JHTableChart alloc] initWithFrame:CGRectMake(10, 64, k_MainBoundsWidth-20, k_MainBoundsHeight)];
/* Table name */
table.tableTitleString = @"全選jeep自由光";
/* Each column of the statement, one of the first to show if the rows and columns that can use the vertical segmentation of rows and columns */
table.colTitleArr = @[@"屬性|配置",@"外觀",@"內飾",@"數量"];
/* The width of the column array, starting with the first column */
table.colWidthArr = @[@100.0,@120.0,@70,@100];
/* Text color of the table body */
table.bodyTextColor = [UIColor redColor];
/* Minimum grid height */
table.minHeightItems = 35;
/* Table line color */
table.lineColor = [UIColor orangeColor];
table.backgroundColor = [UIColor whiteColor];
/* Data source array, in accordance with the data from top to bottom that each line of data, if one of the rows of a column in a number of cells, can be stored in an array of */
table.dataArr = @[
@[@"2.4L優越版",@"2016皓白標準漆藍棕",@[@"鴿子白",@"鵝黃",@"炫彩綠"],@[@"4"]],
@[@"2.4專業版",@[@"2016皓白標準漆藍棕",@"2016晶黑珠光漆黑",@"2016流沙金珠光漆藍棕"],@[@"鴿子白",@"鵝黃",@"炫彩綠",@"彩虹多樣色"],@[@"4",@"5",@"3"]]
];
/* show */
[table showAnimation];
[self.view addSubview:table];
/* Automatic calculation table height */
table.frame = CGRectMake(10, 64, k_MainBoundsWidth-20, [table heightFromThisDataSource]);
效果圖如下：
表格圖
雷達圖 --JHRadarChart
描述:雷達圖可以根據您的數據源，自動生成合適邊角數量的雷達圖。
JHRadarChart *radarChart = [[JHRadarChart alloc] initWithFrame:CGRectMake(10, 74, k_MainBoundsWidth - 20, k_MainBoundsWidth - 20)];
radarChart.backgroundColor = [UIColor whiteColor];
/* Each point of the description text, according to the number of the array to determine the number of basic modules */
radarChart.valueDescArray = @[@"擊殺",@"能力",@"生存",@"推塔",@"補兵",@"其他"];
/* Number of basic module layers */
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"]];
/* Color of each basic module layer */
radarChart.layerFillColor = [UIColor colorWithRed:94/ 256.0 green:187/256.0 blue:242 / 256.0 alpha:0.5];
/* The fill color of the value module is required to specify the color for each value module */
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]];
/* show */
[radarChart showAnimation];
[self.view addSubview:radarChart];
效果圖如下：
雷達圖
結語
好了，中文ReadMe就到此為止了，如果想看英文版ReadMe，點擊這里 哦! 未完待續......
