Charts是一套非常漂亮的開源圖表組件，它是MPAndroidChart在蘋果端的移植版本，同時支持iOS/tvOS/OSX平臺。
Charts是用 Swift語言編寫的，能夠同時在 Swift 和 Objc 工程中使用。
使用環(huán)境
Xcode 8.0/Swift 3.0（如果要支持Swift 2.3，請使用?Charts 2.3.0）
iOS >= 8.0
tvOS >= 9.0
macOS >= 10.11
使用cocopods方式來集成Charts
將下面代碼添加到Podfile文件中，“ChartsDemo”為你的工程的Target。
由于pod的包含swift語言，因此需要加上use_frameworks!
platform :ios,'9.0'
target '*****' do
use_frameworks!
pod 'Charts'
end
這時候直接在ViewController.m里
@import Charts.Swift;
特性（Features）
核心功能：
支持8種不同的圖表類型
支持兩軸縮放（支持觸摸手勢,兩軸單獨或同時的放縮）
支持使用觸摸手勢進行 拖拽/平移。
組合圖表（線狀，柱狀，散點圖，蠟燭圖，氣泡圖等）
多個（或單獨）的軸
可自定義坐標軸 （包括x 軸和 y 軸）
高亮顯示值（支持自定義popup-view來顯示選中的值）
可保存圖表到 Camera-roll, 支持導(dǎo)出為 PNG 和 JPEG格式
預(yù)定義的顏色模板
圖例（可自動生成，或者自定義）
動畫（支持在x和y軸上建立動畫）
限制線（用來提供附加信息，最大值...）
完全自定義（paints，字體，圖例，顏色，背景，手勢，虛線，...）
可直接從 Realm.io 移動數(shù)據(jù)庫繪制數(shù)據(jù)
圖標類型示例：
LineChart（線狀圖）
LineChart.png
LineChart（線狀圖）
LineChart
LineChart (cubic lines)
LineChart
LineChart (漸變填充)
LineChart
Combined-Chart - 組合圖表（下圖為線狀圖和柱狀圖）
Combined-Chart
BarChart(柱狀圖）
BarChart
BarChart (多個數(shù)據(jù)集)
BarChart
Horizontal-BarChart (水平方向的柱狀圖
Horizontal-BarChart
PieChart (餅圖)
PieChart
ScatterChart - 散點圖（帶正方形，三角形，圓形,等等）
ScatterChart
CandleStickChart - 蠟燭圖（用于財務(wù)數(shù)據(jù)）
CandleStickChart
BubbleChart - 氣泡圖（氣泡覆蓋的區(qū)域表示該值）
BubbleChart
RadarChart - 雷達圖（蜘蛛網(wǎng)圖）
實現(xiàn)
首先是最簡單的折線圖實現(xiàn)，效果如下：?
直接上實現(xiàn)代碼
LineChartView *lineChartView = [[LineChartView alloc] init];
[self.view addSubview:lineChartView];
self.lineChartView = lineChartView;
//禁止雙擊縮放 有需要可以設(shè)置為YES
lineChartView.doubleTapToZoomEnabled = NO; ? ?
//表框以及表內(nèi)線條的顏色以及隱藏設(shè)置 根據(jù)自己需要調(diào)整
lineChartView.gridBackgroundColor = [UIColor clearColor]; ? ?
lineChartView.borderColor = [UIColor clearColor];
lineChartView.drawGridBackgroundEnabled = NO;
lineChartView.drawBordersEnabled = NO;
lineChartView.descriptionText = @"XXX";//該表格的描述名稱? ??
lineChartView.descriptionTextColor = [UIColor whiteColor];//描述字體顏色? ??
lineChartView.legend.enabled = YES;//是否顯示折線的名稱以及對應(yīng)顏色 多條折線時必須開啟 否則無法分辨? ??
lineChartView.legend.textColor = [UIColor whiteColor];//折線名稱字體顏色? ??
//設(shè)置動畫時間? ??
[lineChartView animateWithXAxisDuration:1];
//設(shè)置縱軸坐標顯示在左邊而非右邊? ? rightAxis = lineChartView.rightAxis;
rightAxis.drawGridLinesEnabled = NO;
leftAxis = lineChartView.leftAxis;
leftAxis.drawGridLinesEnabled = NO;
leftAxis.labelTextColor = [UIColor whiteColor];
//設(shè)置橫軸坐標顯示在下方 默認顯示是在頂部? ? xAxis = lineChartView.xAxis;
xAxis.labelPosition = XAxisLabelPositionBottom;
xAxis.labelTextColor = [UIColor whiteColor];
xAxis.labelCount = 3;
下面是數(shù)據(jù)方法
//用于存放多個折線數(shù)據(jù)的數(shù)組?
NSMutableArray *sets = [NSMutableArray array];
//turnovers是用于存放模型的數(shù)組??
self.turnovers = 模型數(shù)組 這里是使用的隨機生成的模型數(shù)據(jù)
//橫軸數(shù)據(jù)? NSMutableArray *xValues = [NSMutableArray array];
for (int i = 0; i < self.turnovers.count; i ++) {
????//取出模型數(shù)據(jù)? ? ? ??
????ChartsModel *model = self.turnovers[i];
? ? [xValues addObject:model.enterDate];
? ? ? ? }
}
//設(shè)置橫軸數(shù)據(jù)給chartview? ??
self.lineChartView.xAxis.valueFormatter = [[ChartIndexAxisValueFormatter alloc] initWithValues:xValues]; //縱軸數(shù)據(jù) ??
?NSMutableArray *yValues1 = [NSMutableArray array];
for (int i = 0; i < self.turnovers.count; i ++) {
? ? ? ? ChartsModel *model = self.turnovers[i];
? ? ? ? ChartDataEntry *entry = [[ChartDataEntry alloc] initWithX:i y:model.amount];
? ? ? ? [yValues1 addObject:entry];
? ? }
?//創(chuàng)建LineChartDataSet對象? ??
LineChartDataSet *set1 = [[LineChartDataSet alloc] initWithValues:yValues1 label:@"成交額"];
set1.circleRadius = 1.0;
set1.circleHoleRadius = 0.5;
[set1 setColor:[UIColor redColor]];
set1.mode = LineChartModeCubicBezier;
set1.drawValuesEnabled = NO;
//sets內(nèi)存放所有折線的數(shù)據(jù) 多個折線創(chuàng)建多個LineChartDataSet對象即可? ??
[sets addObject:set1];
LineChartData *data = [[LineChartData alloc] initWithDataSets:sets];
self.lineChartView.data = data;
然后是K線圖的實現(xiàn) 效果如下：?
下面是實現(xiàn)方法:
CandleStickChartView *chartView = [[CandleStickChartView alloc] init];
[self.view addSubview:chartView];
self.chartView = chartView;
?//如果需要顯示選中圖表位置進行數(shù)據(jù)展示 需要設(shè)置代理 可選項? ? chartView.delegate = self;
chartView.backgroundColor = [UIColor whiteColor];
chartView.descriptionTextColor = [UIColor blackColor];
//如果不想要描述文字就直接賦值為空字串? ??
chartView.descriptionText = @"";
//取消雙擊縮放? ??
chartView.doubleTapToZoomEnabled = NO;
// 畫板以及邊框顏色? ??
chartView.gridBackgroundColor = [UIColor clearColor];
chartView.borderColor = [UIColor clearColor];
chartView.pinchZoomEnabled = NO;
//根據(jù)需要顯示或隱藏邊框以及畫板? ??
chartView.drawGridBackgroundEnabled = NO;
chartView.drawBordersEnabled = NO;
//設(shè)置X軸相關(guān)參數(shù)? ??
ChartXAxis *xAxis = _chartView.xAxis;
xAxis.labelPosition = XAxisLabelPositionBottom;
xAxis.drawGridLinesEnabled = NO;
xAxis.drawAxisLineEnabled = YES;
xAxis.forceLabelsEnabled = NO;
?[chartView animateWithYAxisDuration:1.5];
?[chartView animateWithXAxisDuration:1.5];
//設(shè)置y軸相關(guān)參數(shù) 將坐標軸顯示在左邊? ??
ChartYAxis *leftAxis = _chartView.leftAxis;
leftAxis.labelCount = 7;
leftAxis.drawGridLinesEnabled = YES;
leftAxis.drawAxisLineEnabled = YES;
//label位置? ??
leftAxis.labelPosition = YAxisLabelPositionOutsideChart;
//文字顏色? ??
leftAxis.labelTextColor = [UIColor blackColor];
//文字字體? ??
leftAxis.labelFont = [UIFont systemFontOfSize:10];
ChartYAxis *rightAxis = _chartView.rightAxis;
rightAxis.enabled = NO;
下面是數(shù)據(jù)方法
//這里的數(shù)據(jù)為隨機數(shù)據(jù)?
?// 橫軸數(shù)據(jù)?
NSMutableArray *xValues = [NSMutableArray array];
for (int i = 0; i <= 100; i++) {
? ? ? ? [xValues addObject:[NSString stringWithFormat:@"%d", i + 1993]];
? ? }
chartView.maxVisibleCount = 10;
chartView.xAxis.valueFormatter = [[ChartIndexAxisValueFormatter alloc] initWithValues:xValues];
// 初始化CandleChartDataEntry數(shù)組? ??
NSMutableArray *yValues = [NSMutableArray array];
// 產(chǎn)生20個隨機立柱數(shù)據(jù)? ??
for (int i = 0; i <= 100; i ++) {
? ? ? ? CGFloat val = (arc4random_uniform(40));
? ? ? ? CGFloat high = (arc4random_uniform(9)) + 8.0;
? ? ? ? CGFloat low = (arc4random_uniform(9)) + 8.0;
? ? ? ? CGFloat open = (arc4random_uniform(6)) + 1.0;
? ? ? ? CGFloat close = (arc4random_uniform(6)) + 1.0;
? ? ? ? CGFloat even = i % 2 == 0;
? ? ? ? CandleChartDataEntry *y = [[CandleChartDataEntry alloc] initWithX:i shadowH:val + high shadowL:val - low open:even? ? val + open : val - open close:even ? val + close : val - close];
? ? ? ? [yValues addObject:y];
? ? }
CandleChartDataSet *set1 = [[CandleChartDataSet alloc] initWithValues:yValues label:@"data set"];
set1.axisDependency = AxisDependencyLeft;
[set1 setColor:[UIColor blueColor]];
//這是用于顯示最高最低值區(qū)間的立線? ??
set1.shadowColor = [UIColor blackColor];
//不在面板上直接顯示數(shù)值? ??
set1.drawValuesEnabled = NO;
// 立線的寬度? ??
set1.shadowWidth = 0.7;
// close >= open? ??
set1.increasingColor = [UIColor redColor];
// 內(nèi)部是否充滿顏色? ??
set1.decreasingFilled = true;
// open > close? ??
set1.decreasingColor = [UIColor colorWithRed:0.0006 green:0.2288 blue:0.001 alpha:1.0];
// 內(nèi)部是否充滿顏色? ??
set1.increasingFilled = true;
// 賦值數(shù)據(jù)? ??
CandleChartData *data = [[CandleChartData alloc] initWithDataSet:set1];
chartView.data = data;
基礎(chǔ)的柱形圖做法也很簡單 具體實現(xiàn)與折線圖非常類似
首先還是圖例：?
直接上實現(xiàn)代碼
BarChartView *barChartView = [[BarChartView alloc] init];
[self.view addSubview:barChartView];
self.barChartView = barChartView;
self.barChartView.backgroundColor = [UIColor colorWithRed:230/255.0f green:253/255.0f blue:253/255.0f alpha:1];
self.barChartView.noDataText = @"暫無數(shù)據(jù)";//沒有數(shù)據(jù)時的文字提示? ? self.barChartView.drawValueAboveBarEnabled = YES;//數(shù)值顯示在柱形的上面還是下面? ? self.barChartView.drawBarShadowEnabled = NO;//是否繪制柱形的陰影背景? ? self.barChartView.scaleYEnabled = NO;//取消Y軸縮放? ? self.barChartView.doubleTapToZoomEnabled = NO;//取消雙擊縮放? ? self.barChartView.dragEnabled = YES;//啟用拖拽圖表? ? self.barChartView.dragDecelerationEnabled = YES;//拖拽后是否有慣性效果? ? self.barChartView.dragDecelerationFrictionCoef = 0.9;//拖拽后慣性效果的摩擦系數(shù)(0~1)，數(shù)值越小，慣性越不明顯? ? ChartXAxis *xAxis = barChartView.xAxis;
xAxis.axisLineWidth = 1;//設(shè)置X軸線寬? ??
xAxis.labelPosition = XAxisLabelPositionBottom;//X軸的顯示位置，默認是顯示在上面的? ?
?xAxis.drawGridLinesEnabled = NO;//不繪制網(wǎng)格線? ? xAxis.forceLabelsEnabled = YES;
xAxis.labelTextColor = [UIColor blackColor];//label文字顏色? ??
ChartYAxis *leftAxis = self.barChartView.leftAxis;//獲取左邊Y軸? ? leftAxis.forceLabelsEnabled = NO;//不強制繪制制定數(shù)量的label? ??
leftAxis.inverted = NO;//是否將Y軸進行上下翻轉(zhuǎn)? ??
leftAxis.axisLineWidth = 0.5;//Y軸線寬? ? leftAxis.forceLabelsEnabled = YES;
leftAxis.axisLineColor = [UIColor blackColor];//Y軸顏色? ??
leftAxis.axisMinValue = 0;
leftAxis.gridLineDashLengths = @[@3.0f, @3.0f];//設(shè)置虛線樣式的網(wǎng)格線? ? leftAxis.gridColor = [UIColor colorWithRed:200/255.0f green:200/255.0f blue:200/255.0f alpha:1];//網(wǎng)格線顏色? ??
leftAxis.gridAntialiasEnabled = YES;//開啟抗鋸齒? ??
barChartView.rightAxis.enabled = NO;
ChartLimitLine *limitLine = [[ChartLimitLine alloc] initWithLimit:80 label:@"限制線"];
limitLine.lineWidth = 2;
limitLine.lineColor = [UIColor greenColor];
limitLine.lineDashLengths = @[@5.0f, @5.0f];//虛線樣式? ??
limitLine.labelPosition = ChartLimitLabelPositionRightTop;//位置? ??
[leftAxis addLimitLine:limitLine];//添加到Y(jié)軸上? ? leftAxis.drawLimitLinesBehindDataEnabled = YES;//設(shè)置限制線繪制在柱形圖的后面? ? self.barChartView.legend.enabled = NO;//不顯示圖例說明? ? self.barChartView.descriptionText = @"";//不顯示，就設(shè)為空字符串即可
數(shù)據(jù)源方法
// 產(chǎn)生20個隨機立柱數(shù)據(jù)?
?for (int i = 0; i < 20; i ++) {
? ? ? ? double y = (arc4random_uniform(40));
? ? ? ? BarChartDataEntry *yEntry = [[BarChartDataEntry alloc] initWithX:i + 5 y:y];
? ? ? ? [yValues addObject:yEntry];
? ? }
BarChartDataSet *set1 = [[BarChartDataSet alloc] initWithValues:yValues label:@"data set"];
set1.axisDependency = AxisDependencyLeft;
[set1 setColor:[UIColor blueColor]];
//不在面板上直接顯示數(shù)值? ? set1.drawValuesEnabled = YES;
// 賦值數(shù)據(jù)? ? BarChartData *data = [[BarChartData alloc] initWithDataSet:set1];
barChartView.data = data;
柱形圖的隨機數(shù)據(jù)比較相對簡單 設(shè)置好對應(yīng)XY軸的數(shù)據(jù)即可
有的時候，我們繪圖可能不僅僅是一種圖表的呈現(xiàn)，而且多種圖表屬性混合呈現(xiàn)，比如說：
可以看得出來，這是一個LineChartView和一個CandleChartView拼合而成，但凡需要使用到混合數(shù)據(jù)圖表時，我們就需要使用到Charts里的另一個類CombinedChartView，這個類可以實現(xiàn)所有類型圖表混合呈現(xiàn)功能
只要我們想要實現(xiàn)混合圖表，都需要使用該類
實現(xiàn)方式如下：
//很多相似的代碼就不做注釋了 可以參考上面的代碼塊
CombinedChartView *combinedChartView = [[CombinedChartView alloc] init];? ? [self.view addSubview:combinedChartView];? ??
self.combinedChartView = combinedChartView;? ? combinedChartView.doubleTapToZoomEnabled = NO;? ? combinedChartView.gridBackgroundColor = [UIColor clearColor];? ? combinedChartView.borderColor = [UIColor clearColor];? ? combinedChartView.pinchZoomEnabled = NO;? ? combinedChartView.drawGridBackgroundEnabled = NO;? ? combinedChartView.drawBordersEnabled = NO;? ? combinedChartView.descriptionText = @"";? ??
combinedChartView.legend.enabled = NO;//隱藏描述面板? ? //設(shè)置動畫時間
[combinedChartView animateWithXAxisDuration:1];? ? ChartYAxis *rightAxis = combinedChartView.rightAxis;? ??
rightAxis.drawGridLinesEnabled = NO;? ??
ChartYAxis *leftAxis = combinedChartView.leftAxis;? ? leftAxis.drawGridLinesEnabled = NO;? ??
leftAxis.labelTextColor = [UIColor whiteColor];? ??
ChartXAxis *xAxis = combinedChartView.xAxis;? ??
xAxis.labelPosition = XAxisLabelPositionBottom;? ??
xAxis.labelTextColor = [UIColor whiteColor];? ??
xAxis.labelCount = 3;
數(shù)據(jù)方法是重點，CombinedChartView可以賦值多種圖表數(shù)據(jù)，注意不要賦值錯誤
//存放X軸數(shù)據(jù)的數(shù)組?
NSMutableArray *xValues = [NSMutableArray array];
for (int i = 0; i <= 100; i++) {
? ? ? ? [xValues addObject:[NSString stringWithFormat:@"%d", i + 1993]];
? ? }
chartView.maxVisibleCount = 10;
chartView.xAxis.valueFormatter = [[ChartIndexAxisValueFormatter alloc] initWithValues:xValues];
//Y軸數(shù)據(jù)比較關(guān)鍵，不同圖表的數(shù)據(jù)自然是需要分別賦值的 ? ?
//這里數(shù)據(jù)是隨便弄的 看個意思就行? ??
CombinedChartData *data = [[CombinedChartData alloc] init];
//分別賦值lineData(折線) 以及 candle(k線)? ??
//注意 如果需要使用不同的圖表類型混合，那么只需要給data賦值對應(yīng)圖表的數(shù)據(jù)即可這里演示使用的是k線圖以及折線圖 ? ?
data.lineData = [self generateLineData];
data.candleData = [self candleData];
_chartView.xAxis.axisMaximum = data.xMax + 0.25;
_chartView.data = data;
//generateLineData方法? ??
LineChartData *d = [[LineChartData alloc] init];
NSMutableArray *entries = [[NSMutableArray alloc] init];
for (int index = 0; index <= 100; index++)
{
? ????[entries addObject:[[ChartDataEntry alloc] initWithX:index y:(arc4random_uniform(15) + 5)]];
? ? }
LineChartDataSet *set = [[LineChartDataSet alloc] initWithValues:entries label:@"Line DataSet"];
[set setColor:[UIColor colorWithRed:240/255.f green:238/255.f blue:70/255.f alpha:1.f]];
set.lineWidth = 2.5;
[set setCircleColor:[UIColor colorWithRed:240/255.f green:238/255.f blue:70/255.f alpha:1.f]];
set.circleRadius = 3.0;
set.circleHoleRadius = 2.5;
?set.fillColor = [UIColor colorWithRed:240/255.f green:238/255.f blue:70/255.f alpha:1.f];
set.mode = LineChartModeCubicBezier;
set.drawValuesEnabled = YES;
set.valueFont = [UIFont systemFontOfSize:10.f];
set.valueTextColor = [UIColor colorWithRed:240/255.f green:238/255.f blue:70/255.f alpha:1.f];
set.axisDependency = AxisDependencyLeft;
[d addDataSet:set];
return d;
//candleData方法? ??
NSMutableArray *yValues = [NSMutableArray array];
for (int i = 0; i <= 100; i ++) {
? ? ? ? CGFloat val = (arc4random_uniform(40));
? ? ? ? CGFloat high = (arc4random_uniform(9)) + 8.0;
? ? ? ? CGFloat low = (arc4random_uniform(9)) + 8.0;
? ? ? ? CGFloat open = (arc4random_uniform(6)) + 1.0;
? ? ? ? CGFloat close = (arc4random_uniform(6)) + 1.0;
? ? ? ? CGFloat even = i % 2 == 0;
? ? ? ? CandleChartDataEntry *y = [[CandleChartDataEntry alloc] initWithX:i shadowH:val + high shadowL:val - low open:even? ? val + open : val - open close:even ? val + close : val - close];
? ? ? ? [yValues addObject:y];
? ? }
CandleChartDataSet *set1 = [[CandleChartDataSet alloc] initWithValues:yValues label:@"data set"];
set1.axisDependency = AxisDependencyLeft;
CandleChartData *data = [[CandleChartData alloc] init];;
[data addDataSet:set1];
return data;
