【ios相關】關於Charts框架第一期：整合和繪製折線圖

摘要： 前段時間寫專案的時候， 遇到了一個需要畫折線圖需求，研究了一下， 覺得還是直接使用成熟的Charts框架（一款用於繪製圖表的框架，可以繪製柱狀圖、折線圖、K線圖、餅狀圖等）來實現。 去git上下載了Charts原始碼看了下之後， 發現是swift版本的， 而我這個專案是使用OC寫的， 那就...

前段時間寫專案的時候， 遇到了一個需要畫折線圖需求，研究了一下， 覺得還是直接使用成熟的Charts框架（一款用於繪製圖表的框架，可以繪製柱狀圖、折線圖、K線圖、餅狀圖等）來實現。

去git上下載了Charts原始碼看了下之後， 發現是swift版本的， 而我這個專案是使用OC寫的， 那就記錄一下如何整合以及oc和swift混編吧~

一、用cocoapods匯入swift框架到OC專案

cocoapods的安裝和使用這裡就不詳敘了，如果你還沒有安裝cocospods,請參考此連結( ofollow,noindex">https://www.jianshu.com/p/8115e7afce03 )

我們直接開始pod。

開啟我們的專案，點選Pods-> Podfile, 輸入 pod 'Charts', use_frameworks! -> 儲存。

開啟終端， cd 進專案目錄， 然後pod insatll， 靜靜等待pod 完成。

這裡有一個重點： "use_frameworks!"

為什麼一定要寫這句程式碼呢?

oc專案cocoapods後，預設第三方庫 #use_frameworks!

swift專案cocoapods後，預設第三方庫 use_frameworks!

所以用cocoapods 匯入swift 框架到swift專案和OC專案都必須要 use_frameworks!

二、建立橋接檔案

橋接檔案在首次建立swift檔案時會自動生成。如果不小心刪除後， 也可以手動新增，不過名字必須是“ProjectName-Bridging-Header.h”標頭檔案（名稱組成:工程名-Bridging-Header.h）。

建立一個Test.swift,根據提示建立好橋接檔案，名稱不要進行改動：

建立好之後我們編譯一遍，看看專案會不會報錯。（哈哈哈， 並沒有~~）這個時候，你可以把之前建立的swift檔案刪除了。

三、測試整合是否成功

在需要繪製的介面匯入我們的橋接檔案和charts標頭檔案，直接建立一個折線圖。

由於沒有資料，所以出現“No chart data avaliable”就代表整合好了。

四、繪製折線圖

整合好之後我們就正式開始繪製折線圖了。

先進行一些配置:

1、橋接檔案裡引入Charts;

2、Build Settings -> Packaging -> Defines Module ->Yes

匯入標頭檔案 #import "TestPods-Swift.h"

1， 描述一個折線圖物件， 懶載入建立一下。

- (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;// 關閉拖拽圖示
_lineChartView.legend.enabled = NO;// 關閉圖例顯示
[_lineChartView setExtraOffsetsWithLeft:13 top:20 right:40 bottom:0];

// 繪製
_lineChartView.rightAxis.enabled = NO;// 繪製右邊軸
_lineChartView.leftAxis.enabled = NO;// 繪製左邊軸

// Y軸設定
ChartYAxis *leftAxis = _lineChartView.leftAxis;
[leftAxis setXOffset:15.0f];

leftAxis.forceLabelsEnabled = YES;// 強制繪製指定數量的label
leftAxis.labelCount = 8;

leftAxis.gridColor = [UIColor clearColor]; // 網格線顏色
leftAxis.gridAntialiasEnabled = YES;// 開啟抗鋸齒
leftAxis.inverted = NO;// 是否將Y軸進行上下翻轉

// X軸設定
ChartXAxis *xAxis = _lineChartView.xAxis;
xAxis.labelPosition = XAxisLabelPositionBottom; // 設定x軸資料在底部
xAxis.axisLineColor = [UIColor clearColor];// X軸顏色
xAxis.granularityEnabled = YES;// 設定重複的值不顯示
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];

// 能夠顯示的資料數量
_lineChartView.maxVisibleCount = 999;

// 展現動畫
[_lineChartView animateWithYAxisDuration:0.75f];

// 設定選中時氣泡
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軸顯示的資料

- (void)setLineChartWithXData:(NSArray *)xData yData:(NSArray *)yData
{
if (xData.count > 0)
{
//對應Y軸上面需要顯示的資料
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];
}
}

// 設定折線的樣式
LineChartDataSet *set1 = [[LineChartDataSet alloc]initWithValues:yVals label:nil];
set1.lineWidth = 1.0f;// 折線寬度
[set1 setColor:BtnBgColor];// 折線顏色
set1.drawValuesEnabled = NO; // 是否在拐點處顯示資料

// 折線拐點樣式
set1.drawCirclesEnabled = YES;// 是否繪製拐點
set1.drawFilledEnabled = NO;// 是否填充顏色
[set1 setCircleColor:BtnBgColor];// 拐點 圓的顏色
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，模擬真實資料

[self setLineChartWithXData:@[@"9:00",@"10:00",@"11:00",@"12:00",@"13:00",@"14:00"] yData:@[@"47",@"49",@"46",@"51",@"45",@"43"]];

4， 最終效果

以上呢， 就是一個簡單的折線圖的繪製過程了。

有需要的，可以直接下載Demo檢視~

Demo地址（ https://github.com/summersun08/ChartsTest.git ）

看在我這麼可愛的份上， 喜歡就給我一個小心心了:heart::heart::heart: