詳細(xì)使用方法:http://www.cocoachina.com/cms/wap.php?action=article&id=22232
github地址:https://github.com/danielgindi/Charts
看完了效果圖，咱們逐一介紹各種圖表如何繪制吧!
第一步
引入第三方圖表繪制庫Charts
我用的是Carthage方法引入，直接在Cartfile中加入
github "danielgindi/Charts" ~>3.0.4然后在終端命令行輸入:carthage update --platform iOS即可。
導(dǎo)入之后，大家的工程項(xiàng)目將會(huì)包含這個(gè)文件:
由于這個(gè)框架使用swift語言寫的，所以O(shè)C開發(fā)者需要在項(xiàng)目中添加橋接文件，Charts-Swift就是橋接文件，大家不用自定義了，想在哪個(gè)類中調(diào)用Charts,import "Charts-Swift.h"文件就可以了。
第二步
定義圖表，設(shè)置圖標(biāo)的各種屬性
Charts包含的圖表類很多，在此我舉幾個(gè)有代表性的例子:BarChartView(柱狀圖), LineChartView(折線圖), CandleStickChartView(燭形圖，K線圖)等等。
ChartsView的屬性：
1、scale屬性
顧名思義，就是圖標(biāo)是否支持拖拽,scaleYEnabled = YES即縱坐標(biāo)支持拖拽，scaleXEnabled = YES即橫坐標(biāo)支持拖拽。
2、chartDescription屬性
打開這個(gè)屬性，你的圖表上將會(huì)有關(guān)于你的圖標(biāo)的描述。例如: chartView.chartDescription.enabled = YES chartView.chartDescription.text = @"王尼瑪?shù)腸hartsView"
下面的這行小字王尼瑪?shù)腸hartsView就是我的ChartsView的description。
3、pinchZoomEnabled
是否支持X軸、Y軸同時(shí)縮放，如果是YES ，則代表支持同時(shí)縮放。
4、maxVisibleCount
這個(gè)屬性是控制圖標(biāo)上的數(shù)字展示的最大個(gè)數(shù)的，如果你的圖標(biāo)不想顯示上面的數(shù)字，就可以把maxVisibleCount屬性設(shè)置為0。
5、legend
這個(gè)Bool屬性是設(shè)置要不要顯示圖例的，看到上圖底部的"-- DataSet 1"了嗎，如果你不想要顯示這一欄，就把legend.enabled設(shè)置為NO。
6、noDataText
沒有數(shù)據(jù)的時(shí)候ChartsView上需要顯示什么文字。chartsView中有三個(gè)重要的屬性需要開發(fā)者去設(shè)置，那就是leftAxis(左軸)，rightAxis（右軸），xAxis（X軸）。
7、doubleTapToZoomEnabled
是否允許雙擊縮放。
8、delegate
代理，大家都懂的。對(duì)應(yīng)的protocal有4個(gè)，都是可選選項(xiàng)
//圖表中的數(shù)值被選中
-?(void)chartValueSelected:(ChartViewBase?*?_Nonnull)chartView?entry:(ChartDataEntry?*?_Nonnull)entry?highlight:(ChartHighlight?*?_Nonnull)highlight;
//圖表中的空白區(qū)域被點(diǎn)擊
-?(void)chartValueNothingSelected:(ChartViewBase?*?_Nonnull)chartView;
//圖表縮放
-?(void)chartScaled:(ChartViewBase?*?_Nonnull)chartView?scaleX:(CGFloat)scaleX?scaleY:(CGFloat)scaleY;
//圖標(biāo)被移動(dòng)
-?(void)chartTranslated:(ChartViewBase?*?_Nonnull)chartView?dX:(CGFloat)dX?dY:(CGFloat)dY;
Axis屬性
1、enabled
設(shè)置為NO的話，則對(duì)應(yīng)的坐標(biāo)軸不顯示。
2、labelPosition
表示左軸坐標(biāo)的位置，有2個(gè)選項(xiàng):YAxisLabelPositionOutsideChart = 0,YAxisLabelPositionInsideChart = 1,坐標(biāo)顯示在軸內(nèi)或者是軸外。
3、labelCount
即在坐標(biāo)軸上最多顯示多少個(gè)坐標(biāo)點(diǎn)
4、drawGridBackgroundEnabled
是否要畫網(wǎng)格線
5、gridLineDashLengths
gridLineDashLengths = @[@2.f, @5.f]即線段寬為2.0f，空格寬為5.0f。
第三步
填充數(shù)據(jù)
定義了表格的基本屬性之后我們就要填充數(shù)據(jù)了。在這里我僅以折線圖表為例。
我們先介紹兩個(gè)概念:set和data,LineChartData就是折線圖的data類，它可以由很多組set組成，一組就是一條折線。因此我們可以定義set的屬性，從而繪制各種各樣的折線。示例如下:
//是否繪制圖標(biāo)
set1.drawIconsEnabled?=?NO;
//折線顏色
[set1?setColor:UIColor.blackColor];
//折線點(diǎn)的顏色
[set1?setCircleColor:UIColor.blackColor];
//折線的寬度
set1.lineWidth?=?1.0;
//折線點(diǎn)的寬度
set1.circleRadius?=?3.0;
//是否畫空心圓
set1.drawCircleHoleEnabled?=?NO;
//折線點(diǎn)的值的大小
set1.valueFont?=?[UIFont?systemFontOfSize:9.f];
//圖例的線寬
set1.formLineWidth?=?1.0;
//圖例的字體大小
set1.formSize?=?15.0;
下面具體介紹如何填充數(shù)據(jù):
//定義一個(gè)數(shù)組承接數(shù)據(jù)
//對(duì)應(yīng)Y軸上面需要顯示的數(shù)據(jù)
????NSMutableArray?*yVals?=?[[NSMutableArray?alloc]?init];
????for?(int?i?=?0;?i?<?self.financeLineDotDataList.count;?i++)?{
????????BTCTrenddata?*dotData?=?(BTCTrenddata?*)[self.financeLineDotDataList?objectAtIndex:i];
????????//將橫縱坐標(biāo)以ChartDataEntry的形式保存下來，注意橫坐標(biāo)值一般是i的值，而不是你的數(shù)據(jù)????//里面具體的值，如何將具體數(shù)據(jù)展示在X軸上我們下面將會(huì)說到。
????????ChartDataEntry?*entry?=?[[ChartDataEntry?alloc]?initWithX:i?y:dotData.price];
????????[yVals?addObject:entry];
????}
????LineChartDataSet?*set1?=?nil;
????//請(qǐng)注意這里，如果你的圖表以前繪制過，那么這里直接重新給data賦值就行了。
????//如果沒有，那么要先定義set的屬性。
????if?(self.financeLineChartsView.data.dataSetCount?>?0)?{
????????LineChartData?*data?=?(LineChartData?*)self.financeLineChartsView.data;
????????set1?=?(LineChartDataSet?*)data.dataSets[0];
????????//????????set1.yVals?=?yVals;
????????set1?=?(LineChartDataSet?*)self.financeLineChartsView.data.dataSets[0];
????????set1.values?=?yVals;
????????//通知data去更新
????????[self.financeLineChartsView.data?notifyDataChanged];
????????//通知圖表去更新
????????[self.financeLineChartsView?notifyDataSetChanged];
????}else{
????????//創(chuàng)建LineChartDataSet對(duì)象
????????set1?=?[[LineChartDataSet?alloc]?initWithValues:yVals];
????????//自定義set的各種屬性
????????//設(shè)置折線的樣式
????????set1.drawIconsEnabled?=?NO;
????????set1.formLineWidth?=?1.1;//折線寬度
????????set1.formSize?=?15.0;
????????set1.drawValuesEnabled?=?YES;//是否在拐點(diǎn)處顯示數(shù)據(jù)
????????set1.valueColors?=?@[[UIColor?whiteColor]];//折線拐點(diǎn)處顯示數(shù)據(jù)的顏色
????????[set1?setColor:RGBCOLOR(248,?144,?28)];//折線顏色
????????//折線拐點(diǎn)樣式
????????set1.drawCirclesEnabled?=?NO;//是否繪制拐點(diǎn)
????????//第二種填充樣式:漸變填充
????????set1.drawFilledEnabled?=?YES;//是否填充顏色
????????NSArray?*gradientColors?=?@[(id)RGBACOLOR(218,168,42,0).CGColor,
????????????????????????????????????(id)RGBACOLOR(248,223,91,1).CGColor];
????????CGGradientRef?gradientRef?=?CGGradientCreateWithColors(nil,?(CFArrayRef)gradientColors,?nil);
????????set1.fillAlpha?=?1.0f;//透明度
????????set1.fill?=?[ChartFill?fillWithLinearGradient:gradientRef?angle:90.0f];//賦值填充顏色對(duì)象
????????CGGradientRelease(gradientRef);//釋放gradientRef
????????//點(diǎn)擊選中拐點(diǎn)的交互樣式
????????set1.highlightEnabled?=?YES;//選中拐點(diǎn),是否開啟高亮效果(顯示十字線)
????????set1.highlightColor?=?RGBCOLOR(125,?125,?125);//點(diǎn)擊選中拐點(diǎn)的十字線的顏色
????????set1.highlightLineWidth?=?1.1/[UIScreen?mainScreen].scale;//十字線寬度
????????set1.highlightLineDashLengths?=?@[@5,?@5];//十字線的虛線樣式
????????//將?LineChartDataSet?對(duì)象放入數(shù)組中
????????NSMutableArray?*dataSets?=?[[NSMutableArray?alloc]?init];
????????[dataSets?addObject:set1];
????????//創(chuàng)建?LineChartData?對(duì)象,?此對(duì)象就是lineChartView需要最終數(shù)據(jù)對(duì)象
????????LineChartData?*data?=?[[LineChartData?alloc]?initWithDataSets:dataSets];
????????[data?setValueFont:[UIFont?systemFontOfSize:8.f]];//文字字體
????????[data?setValueTextColor:[UIColor?whiteColor]];//文字顏色
????????self.financeLineChartsView.data?=?data;
????????//這里可以調(diào)用一個(gè)加載動(dòng)畫即1s出來一個(gè)繪制點(diǎn)
????????[self.financeLineChartsView?animateWithXAxisDuration:1.0f];
????}
以上就是填充數(shù)據(jù)的基本方法。到這里，大家就已經(jīng)掌握了用charts繪制圖表的基本方法了。下面我們來看一下一些比較難的用法。
重難點(diǎn)解析
需求一:兩個(gè)表格聯(lián)動(dòng)，即拖拽或者一個(gè)，另一個(gè)需要跟著動(dòng)。
這個(gè)需求可以用協(xié)議解決:
-?(void)chartScaled:(ChartViewBase?*)chartView?scaleX:(CGFloat)scaleX?scaleY:(CGFloat)scaleY?{
?CGAffineTransform?srcMatrix?=?chartView.viewPortHandler.touchMatrix;
?[self.combinedChartView.viewPortHandler?refreshWithNewMatrix:srcMatrix?chart:self.combinedChartView?invalidate:YES];
?[self.barChartView.viewPortHandler?refreshWithNewMatrix:srcMatrix?chart:self.barChartView?invalidate:YES];
}
?-?(void)chartTranslated:(ChartViewBase?*)chartView?dX:(CGFloat)dX?dY:(CGFloat)dY?{
?CGAffineTransform?srcMatrix?=?chartView.viewPortHandler.touchMatrix;
?[self.combinedChartView.viewPortHandler?refreshWithNewMatrix:srcMatrix?chart:self.combinedChartView?invalidate:YES];
?[self.barChartView.viewPortHandler?refreshWithNewMatrix:srcMatrix?chart:self.barChartView?invalidate:YES];
?}
需求二：在一個(gè)圖表上繪制多種類型的線表，例如K線圖+柱狀圖
這個(gè)需求會(huì)用到另一個(gè)ChartView類型:CombinedChartView
CombinedChartData?*combinedData?=?[[CombinedChartData?alloc]?init];
combinedData.lineData?=?[self?generateLineData];
combinedData.candleData?=?[self?generateCandleData];
話不多說，待會(huì)我會(huì)貼出Demo
需求三：希望在X軸上顯示出具體的數(shù)值
我剛才說過，繪制表格的時(shí)候X值是i的值，即從0到i，那么我們?nèi)绾物@示服務(wù)器給我們的X值呢？這里需要引入一個(gè)協(xié)議:IChartAxisValueFormatter,聲明一個(gè)NSObject類，如BTCDepthXAxisFormatter遵循IChartAxisValueFormatter協(xié)議，重寫-(NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis方法，然后進(jìn)行賦值，xAxis.valueFormatter = [[BTCDepthXAxisFormatter alloc] init]即可。
