最近做項(xiàng)目需要畫K線圖和折線圖隆判，引入了第三方的圖標(biāo)庫Charts沐飘。
Charts
????????這個圖表庫基本上能夠滿足大家對于圖表繪制的需要熟空，但是api接口的解釋并不是很詳細(xì)鬼譬，該庫雖然有強(qiáng)大的功能纽帖，但是開發(fā)者看了很長時間還是一頭霧水嘀粱。而且網(wǎng)上相關(guān)的資源不是很多提针，所以我寫了這篇文章希望對大家有所幫助攒暇。
? ? ? ? 咱們先看一下官方給出的Demo效果:
折線圖
柱狀圖
K線圖
看完了效果圖海雪，咱們逐一介紹各種圖表如何繪制吧!
第一步
引入第三方圖表繪制庫Charts
我用的是Carthage方法引入锦爵，直接在Cartfile中加入"github "danielgindi/Charts" ~> 3.0.4"，然后在終端命令行輸入:carthage update --platform iOS即可喳魏。
倒入之后棉浸，大家的工程項(xiàng)目將會包含這個文件:
由于這個框架使用swift語言寫的，所以O(shè)C開發(fā)者需要在項(xiàng)目中添加橋接文件刺彩，"Charts-Swift"就是橋接文件迷郑，大家不用自定義了枝恋，想在哪個類中調(diào)用Charts,import "Charts-Swift.h"文件就可以了。
第二步
定義圖表嗡害，設(shè)置圖標(biāo)的各種屬性
Charts包含的圖表類很多焚碌，在此我舉幾個有代表性的例子:BarChartView(柱狀圖),?LineChartView(折線圖),?CandleStickChartView(燭形圖，K線圖)等等霸妹。
ChartsView的屬性：
1十电、scale屬性
顧名思義，就是圖標(biāo)是否支持拖拽,scaleYEnabled = YES即縱坐標(biāo)支持拖拽叹螟，scaleXEnabled = YES即橫坐標(biāo)支持拖拽鹃骂。
2、chartDescription屬性
打開這個屬性罢绽，你的圖表上將會有關(guān)于你的圖標(biāo)的描述畏线。例如:? ? _chartView.chartDescription.enabled = YES; _chartView.chartDescription.text = @"王尼瑪?shù)腸hartsView";
下面的這行小字"王尼瑪?shù)腸hartsView"就是我的ChartsView的description。
3良价、pinchZoomEnabled
是否支持X軸寝殴、Y軸同時縮放，如果是YES 明垢，則代表支持同時縮放蚣常。
4、maxVisibleCount
這個屬性是控制圖標(biāo)上的數(shù)字展示的最大個數(shù)的痊银，如果你的圖標(biāo)不想顯示上面的數(shù)字抵蚊，就可以把maxVisibleCount屬性設(shè)置為0。
5曼验、legend
這個Bool屬性是設(shè)置要不要顯示圖例的泌射，看到上圖底部的"-- DataSet 1"了嗎，如果你不想要顯示這一欄鬓照，就把legend.enabled設(shè)置為NO。
6孤紧、noDataText
沒有數(shù)據(jù)的時候ChartsView上需要顯示什么文字豺裆。
chartsView中有三個重要的屬性需要開發(fā)者去設(shè)置，那就是leftAxis(左軸)号显，rightAxis（右軸）臭猜，xAxis（X軸）。
7押蚤、doubleTapToZoomEnabled
是否允許雙擊縮放蔑歌。
8、delegate
代理揽碘，大家都懂的次屠。對應(yīng)的protocal有4個园匹，都是可選選項(xiàng)：
圖表中的數(shù)值被選中
- (void)chartValueSelected:(ChartViewBase * _Nonnull)chartView entry:(ChartDataEntry * _Nonnull)entry highlight:(ChartHighlight * _Nonnull)highlight;
圖標(biāo)中的空白區(qū)域被點(diǎn)擊
- (void)chartValueNothingSelected:(ChartViewBase * _Nonnull)chartView;
圖表縮放
- (void)chartScaled:(ChartViewBase * _Nonnull)chartView scaleX:(CGFloat)scaleX scaleY:(CGFloat)scaleY;
圖標(biāo)被移動
- (void)chartTranslated:(ChartViewBase * _Nonnull)chartView dX:(CGFloat)dX dY:(CGFloat)dY;
Axis屬性
1、enabled
設(shè)置為NO的話劫灶，則對應(yīng)的坐標(biāo)軸不顯示裸违。
2、labelPosition
表示左軸坐標(biāo)的位置本昏，有2個選項(xiàng):YAxisLabelPositionOutsideChart = 0,YAxisLabelPositionInsideChart = 1,坐標(biāo)顯示在軸內(nèi)或者是軸外供汛。
3、labelCount
即在坐標(biāo)軸上最多顯示多少個坐標(biāo)點(diǎn)
4涌穆、drawGridBackgroundEnabled
是否要畫網(wǎng)格
5怔昨、gridLineDashLengths
gridLineDashLengths = @[@2.f, @5.f];即線段寬為2.0f，空格寬為5.0f宿稀。
第三步
填充數(shù)據(jù)
定義了表格的基本屬性之后我們就要填充數(shù)據(jù)了朱监。在這里我僅以折線圖表為例。
這里需要介紹兩個概念: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ù):
//定義一個數(shù)組承接數(shù)據(jù)
NSMutableArray *values = [[NSMutableArray alloc] init];
? ? for (int i = 0; i < count; i++)
? ? {
? ? ? ? double val = arc4random_uniform(range) + 3;
//將橫縱坐標(biāo)以ChartDataEntry的形式保存下來，注意橫坐標(biāo)值一般是i的值唯欣，而不是你的數(shù)據(jù) ? ?//里面具體的值嘹吨，如何將具體數(shù)據(jù)展示在X軸上我們下面將會說到。
? ? ? ? [values addObject:[[ChartDataEntry alloc] initWithX:i y:val icon: [UIImage imageNamed:@"icon"]]];
? ? }
? ? LineChartDataSet *set1 = nil;
//請注意這里境氢，如果你的圖表以前繪制過蟀拷，那么這里直接重新給data賦值就行了。
//如果沒有萍聊，那么要先定義set的屬性问芬。
? ? if (_chartView.data.dataSetCount > 0)
? ? {
? ? ? ? set1 = (LineChartDataSet *)_chartView.data.dataSets[0];
? ? ? ? set1.values = values;
//通知data去更新
? ? ? ? [_chartView.data notifyDataChanged];
//通知圖表去更新
? ? ? ? [_chartView notifyDataSetChanged];
? ? }
? ? else
? ? {
? ? ? ? set1 = [[LineChartDataSet alloc] initWithValues:values label:@"DataSet 1"];
????????//自定義set的各種屬性
????????[self configSet:set1];
? ? ? ? NSMutableArray *dataSets = [[NSMutableArray alloc] init];
? ? ? ? [dataSets addObject:set1];
????????//將set保存到data當(dāng)中
?? ? ? ?LineChartData *data = [[LineChartData alloc] initWithDataSets:dataSets];
? ? ? ? ?_chartView.data = data;
? ? }
以上就是填充數(shù)據(jù)的基本方法。到這里寿桨，大家就已經(jīng)掌握了用charts繪制圖表的基本方法了此衅。下面我們來看一下一些比較難的用法。
重點(diǎn)難點(diǎn)解析
需求一:兩個表格聯(lián)動亭螟，即拖拽或者一個挡鞍，另一個需要跟著動。
這個需求可以用協(xié)議解決:
- (void)chartScaled:(ChartViewBase *)chartView scaleX:(CGFloat)scaleX scaleY:(CGFloat)scaleY {
? ? CGAffineTransform srcMatrix = chartView.viewPortHandler.touchMatrix;
? ? [self.lineChartView.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.lineChartView.viewPortHandler refreshWithNewMatrix:srcMatrix
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? chart:self.combinedChartView
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? invalidate:YES];
? ? [self.barChartView.viewPortHandler refreshWithNewMatrix:srcMatrix
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? chart:self.barChartView
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? invalidate:YES];
}
需求二：在一個圖表上繪制多種類型的線表预烙，例如K線圖+柱狀圖
這個需求會用到另一個ChartView類型:CombinedChartView
CombinedChartData *combinedData = [[CombinedChartData alloc] init];
? ? combinedData.lineData = [self generateLineData];
? ? combinedData.candleData = [self generateCandleData];
話不多說墨微，待會我會貼出Demo
需求三：希望在X軸上顯示出具體的數(shù)值
我剛才說過，繪制表格的時候X值是i的值扁掸，即從0到i翘县，那么我們?nèi)绾物@示服務(wù)器給我們的X值呢最域？這里需要引入一個協(xié)議:IChartAxisValueFormatter,聲明一個NSObject類，如BTCDepthXAxisFormatter遵循IChartAxisValueFormatter協(xié)議炼蹦，重寫-(NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis方法羡宙，然后進(jìn)行賦值，xAxis.valueFormatter = [[BTCDepthXAxisFormatter alloc] init]即可掐隐。
需求四：在K線圖上加上最高值和最低值的箭頭指示標(biāo)志狗热，效果如下圖:
這個問題我也不清楚，沒有找到相關(guān)的api接口虑省，希望知道答案的童鞋朋友留言幫我解答哈匿刮！
至此，iOS-Charts的基本用法就介紹完了探颈，如果還有不理解的問題熟丸，可以加我的微信(justlikeitRobert)，或者點(diǎn)擊我在github上的Demo進(jìn)行研究伪节，歡迎Star光羞，作為對我碼字的鼓勵與獎賞。??
原鏈接：http://www.reibang.com/p/524036c43534
