前段時(shí)間寫(xiě)項(xiàng)目的時(shí)候， 遇到了一個(gè)需要畫(huà)折線圖需求，研究了一下， 覺(jué)得還是直接使用成熟的Charts框架（一款用于繪制圖表的框架，可以繪制柱狀圖、折線圖、K線圖、餅狀圖等）來(lái)實(shí)現(xiàn)。
去git上下載了Charts源碼看了下之后， 發(fā)現(xiàn)是swift版本的， 而我這個(gè)項(xiàng)目是使用OC寫(xiě)的， 那就記錄一下如何集成以及oc和swift混編吧~
一、用cocoapods導(dǎo)入swift框架到OC項(xiàng)目
cocoapods的安裝和使用這里就不詳敘了，如果你還沒(méi)有安裝cocospods,請(qǐng)參考此鏈接(http://www.itdecent.cn/p/8115e7afce03)
我們直接開(kāi)始pod。
打開(kāi)我們的項(xiàng)目，點(diǎn)擊Pods-> Podfile, 輸入 pod 'Charts', use_frameworks! -> 保存。
打開(kāi)終端， cd 進(jìn)項(xiàng)目目錄， 然后pod insatll， 靜靜等待pod 完成。
這里有一個(gè)重點(diǎn)： "use_frameworks!"
為什么一定要寫(xiě)這句代碼呢?
oc項(xiàng)目cocoapods后，默認(rèn)第三方庫(kù) #use_frameworks!
swift項(xiàng)目cocoapods后，默認(rèn)第三方庫(kù) use_frameworks!
所以用cocoapods 導(dǎo)入swift 框架到swift項(xiàng)目和OC項(xiàng)目都必須要 use_frameworks!
二、創(chuàng)建橋接文件
橋接文件在首次創(chuàng)建swift文件時(shí)會(huì)自動(dòng)生成。如果不小心刪除后， 也可以手動(dòng)添加，不過(guò)名字必須是“ProjectName-Bridging-Header.h”頭文件（名稱(chēng)組成:工程名-Bridging-Header.h）。
創(chuàng)建一個(gè)Test.swift,根據(jù)提示創(chuàng)建好橋接文件，名稱(chēng)不要進(jìn)行改動(dòng)：
創(chuàng)建好之后我們編譯一遍，看看項(xiàng)目會(huì)不會(huì)報(bào)錯(cuò)。（哈哈哈， 并沒(méi)有~~）這個(gè)時(shí)候，你可以把之前創(chuàng)建的swift文件刪除了。
三、測(cè)試集成是否成功
在需要繪制的界面導(dǎo)入我們的橋接文件和charts頭文件，直接創(chuàng)建一個(gè)折線圖。
由于沒(méi)有數(shù)據(jù)，所以出現(xiàn)“No chart data avaliable”就代表集成好了。
四、繪制折線圖
集成好之后我們就正式開(kāi)始繪制折線圖了。
先進(jìn)行一些配置:
1、橋接文件里引入Charts;
2、Build Settings -> Packaging -> Defines Module ->Yes
導(dǎo)入頭文件 #import "TestPods-Swift.h"
1， 描述一個(gè)折線圖對(duì)象， 懶加載創(chuàng)建一下。
- (LineChartView *)lineChartView
{
if (!_lineChartView)
{
_lineChartView = [[LineChartView alloc] init];
_lineChartView.backgroundColor = [UIColor whiteColor];
_lineChartView.chartDescription.enabled = YES;
_lineChartView.delegate = self;
_lineChartView.scaleYEnabled = YES; // 取消Y軸縮放
_lineChartView.scaleXEnabled = NO; // 取消X軸縮放
_lineChartView.doubleTapToZoomEnabled = NO; // 取消雙擊縮放
_lineChartView.dragEnabled = NO; // 關(guān)閉拖拽圖標(biāo)
_lineChartView.legend.enabled = NO; // 關(guān)閉圖例顯示
[_lineChartView setExtraOffsetsWithLeft:13 top:20 right:40 bottom:0];
// 繪制
_lineChartView.rightAxis.enabled = NO; // 繪制右邊軸
_lineChartView.leftAxis.enabled = NO; // 繪制左邊軸
// Y軸設(shè)置
ChartYAxis *leftAxis = _lineChartView.leftAxis;
[leftAxis setXOffset:15.0f];
leftAxis.forceLabelsEnabled = YES; // 強(qiáng)制繪制指定數(shù)量的label
leftAxis.labelCount = 8;
leftAxis.gridColor = [UIColor clearColor]; // 網(wǎng)格線顏色
leftAxis.gridAntialiasEnabled = YES; // 開(kāi)啟抗鋸齒
leftAxis.inverted = NO; // 是否將Y軸進(jìn)行上下翻轉(zhuǎn)
// X軸設(shè)置
ChartXAxis *xAxis = _lineChartView.xAxis;
xAxis.labelPosition = XAxisLabelPositionBottom; // 設(shè)置x軸數(shù)據(jù)在底部
xAxis.axisLineColor = [UIColor clearColor]; // X軸顏色
xAxis.granularityEnabled = YES; // 設(shè)置重復(fù)的值不顯示
xAxis.gridColor = [UIColor clearColor];
xAxis.labelTextColor = UIColorFromHEXA(0xa7b0c2,1.0); // 文字顏色
NSNumberFormatter *xAxisFormatter = [[NSNumberFormatter alloc] init];
xAxisFormatter.positiveSuffix = @":00";
xAxisFormatter.positivePrefix = @"|";
xAxis.valueFormatter = [[ChartDefaultAxisValueFormatter alloc] initWithFormatter:xAxisFormatter];
// 能夠顯示的數(shù)據(jù)數(shù)量
_lineChartView.maxVisibleCount = 999;
// 展現(xiàn)動(dòng)畫(huà)
[_lineChartView animateWithYAxisDuration:0.75f];
// 設(shè)置選中時(shí)氣泡
XYMarkerView *marker = [[XYMarkerView alloc] initWithColor:UIColorFromHEXA(0x00bcac,1.0) font:[UIFont systemFontOfSize:12.0] textColor:UIColor.whiteColor insets:UIEdgeInsetsMake(3, 3, 16.0, 3) xAxisValueFormatter:_lineChartView.xAxis.valueFormatter];
marker.chartView = _lineChartView;
marker.minimumSize = CGSizeMake(30.0f, 15.0f);
_lineChartView.marker = marker;
}
return _lineChartView;
}
2， 處理折線圖X軸，Y軸顯示的數(shù)據(jù)
- (void)setLineChartWithXData:(NSArray *)xData yData:(NSArray *)yData
{
if (xData.count > 0)
{
//對(duì)應(yīng)Y軸上面需要顯示的數(shù)據(jù)
NSMutableArray *yVals = [[NSMutableArray alloc] init];
for (int i = 0; i < yData.count; I++)
{
ChartDataEntry *entry = [[ChartDataEntry alloc] initWithX:[xData[i] doubleValue] y:[yData[i] doubleValue]];
[yVals addObject:entry];
if (i == yData.count - 1)
{
self.contentLab.text = [NSString stringWithFormat:@"%g℃",entry.y];
}
}
// 設(shè)置折線的樣式
LineChartDataSet *set1 = [[LineChartDataSet alloc]initWithValues:yVals label:nil];
set1.lineWidth = 1.0f; // 折線寬度
[set1 setColor:BtnBgColor]; // 折線顏色
set1.drawValuesEnabled = NO; // 是否在拐點(diǎn)處顯示數(shù)據(jù)
// 折線拐點(diǎn)樣式
set1.drawCirclesEnabled = YES; // 是否繪制拐點(diǎn)
set1.drawFilledEnabled = NO; // 是否填充顏色
[set1 setCircleColor:BtnBgColor]; // 拐點(diǎn) 圓的顏色
set1.circleRadius = 5.0f;
set1.highlightColor = [UIColor clearColor];
NSMutableArray *dataSets = [[NSMutableArray alloc] init];
[dataSets addObject:set1];
LineChartData *data = [[LineChartData alloc] initWithDataSets:dataSets];
[data setValueFont:[UIFont fontWithName:@"HelveticaNeue-Light" size:11.0f]]; // 文字字體
[data setValueTextColor:[UIColor blackColor]]; // 文字顏色
_lineChartView.data = data;
[_lineChartView highlightValue: [[ChartHighlight alloc] initWithX:[xData[xData.count - 1] doubleValue] y:[yData[yData.count - 1] doubleValue] dataSetIndex:0 dataIndex:0]];
}
}
3，模擬真實(shí)數(shù)據(jù)
[self setLineChartWithXData:@[@"9:00",@"10:00",@"11:00",@"12:00",@"13:00",@"14:00"] yData:@[@"47",@"49",@"46",@"51",@"45",@"43"]];
4， 最終效果
以上呢， 就是一個(gè)簡(jiǎn)單的折線圖的繪制過(guò)程了。
有需要的，可以直接下載Demo查看~
Demo地址（https://github.com/summersun08/ChartsTest.git）
看在我這么可愛(ài)的份上， 喜歡就給我一個(gè)小心心了??????
——————————————————————————-
更新一個(gè)小細(xì)節(jié)：
OC和Swift混編時(shí)， import "工程名-swift.h"時(shí)，總會(huì)提示這個(gè)".h Not Found"
這個(gè)問(wèn)題很好解決，
TARGET ->Build Settings-> Packaging -> Product Module Name , 刪掉默認(rèn)的，重新輸入工程名
之后clear工程， 重新運(yùn)行就好。
