這篇文章主要講述Chats框架的新的賦值方式，因為在網絡上有同行已經分享過Charts框架的使用方式了，我也是看了他們分享的文章 (大部分代碼都是借鑒于他們的，謝謝他們的分享) 同時結合Charts框架自帶的Demo了解到新賦值方式。
框架的導入：
1 我使用的cocoapods 進行導入 Charts 框架
導入時需要注意： pod 'Charts' 后面需要添加 use_frameworks! 。-
2 由于Charts框架使用的是Swift 編寫，需要添加Swift與OC間的橋接文件：
隨意創(chuàng)建一個 Swift 文件將會彈出以下對話框，選中默認的 Create Bridging Header 將會自動生成一個橋接文件
例如：我創(chuàng)建一個Swift文件后生成的橋接文件（一個 .h 文件） ChartsTestDemo-Bridging-Header.h
創(chuàng)建Swift文件時 會自動彈出 創(chuàng)建橋接文件的彈框 3 在橋接文件中引入 Charts 框架 @import Charts; （如果pod 框架成功 提示找不到該文件時，關閉Xcode 重啟一下，原因可能是開發(fā)工具的問題）。
4 編譯成功，表示該框架就可以用OC的方法進行使用。
5 下面介紹 Charts 柱狀圖的基本使用，在文章最后將會給出GitHub的鏈接，是我對餅圖、柱狀圖、折線圖的使用。
柱狀圖的使用：
該柱狀圖，自定了 X軸值，添加氣泡，默認選中其中一項（因為項目需要就以項目為主的樣式了）。
樣式1--樣式6自定義添加的，默認選中最后一項
導入橋接文件
`#import"ChartsTestDemo-Bridging-Header.h" // 橋接Swift文件
初始化賦值數組：
_dataArr=@[@21,@80,@12,@33,@24,@60];
//月份數據如果X軸值2月3月4月...使用以下數組
//_dataTitleArr = @[@2, @3, @4, @5, @6, @7];
//如果自定義X軸值樣式如蘋果桃子西瓜菠蘿...使用以下數組
_dataTitleArr=@[@0,@1,@2,@3,@4,@5]; // 因為_dataArr只有6個值所以從0 ... _dataArr.count-1
初始化視圖:
- (void)setupLayout {
if (!_barChartView) {
_barChartView = [[BarChartView alloc] init];
_barChartView.delegate = self;//設置代理
_barChartView.backgroundColor = [UIColor whiteColor];
_barChartView.noDataText = @"暫無數據"; // 沒有數據時的文字提示
_barChartView.drawValueAboveBarEnabled = YES; // 數值顯示在柱形的上面還是下面
_barChartView.drawBarShadowEnabled = NO; // 是否繪制柱形的陰影背景
// barChartView的交互設置
_barChartView.scaleYEnabled = NO; // 取消Y軸縮放
_barChartView.scaleXEnabled = NO; // 取消X軸縮放
_barChartView.doubleTapToZoomEnabled = NO; // 取消雙擊縮放
_barChartView.dragEnabled = NO; // 啟用拖拽圖表
[_barChartView setExtraOffsetsWithLeft:5 top:10 right:20 bottom:0];
[self addSubview:_barChartView];
[self.barChartView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.equalTo(self);
make.center.equalTo(self);
make.height.equalTo(@300);
}];
// 設置動畫效果，可以設置X軸和Y軸的動畫效果
[_barChartView animateWithYAxisDuration:1.75f];
// X 軸 的設置
ChartXAxis *xAxis = _barChartView.xAxis;
xAxis.axisLineWidth = 0; // 設置X軸線寬
xAxis.labelPosition = XAxisLabelPositionBottom; // X軸的顯示位置，默認是顯示在上面的
xAxis.drawGridLinesEnabled = NO; // 不繪制網格線
// xAxis.spaceMin = 1;//設置label間隔，若設置為1，則如果能全部顯示，則每個柱形下面都會顯示label
xAxis.labelTextColor = [UIColor orangeColor]; //label文字顏色
// 月份數據 如果 X 軸值 2月 3月 4月 ... 使用以下數組
/***
NSNumberFormatter *xAxisFormatter = [[NSNumberFormatter alloc] init];
xAxisFormatter.positiveSuffix = @"月";
xAxis.valueFormatter = [[ChartDefaultAxisValueFormatter alloc] initWithFormatter:xAxisFormatter];
*/
// 使用自定義 X軸值
NSMutableArray *xVals = [[NSMutableArray alloc] init];
for (int i = 0; i < _dataArr.count; i++) {
[xVals addObject: [NSString stringWithFormat:@"樣式%d", i + 1]];
}
xAxis.valueFormatter = [[DateValueFormatter alloc] initWithArr:[xVals copy]];
_barChartView.rightAxis.enabled = NO; // 不繪制右邊軸
_barChartView.leftAxis.enabled = YES; // 是否繪制左邊軸
ChartYAxis *leftAxis = _barChartView.leftAxis; // 獲取左邊Y軸
leftAxis.labelCount = 6; // Y軸label數量，數值不一定，如果forceLabelsEnabled等于YES, 則強制繪制制定數量的label, 但是可能不平均
leftAxis.forceLabelsEnabled = YES; // 不強制繪制指定數量的label
leftAxis.inverted = NO; // 是否將Y軸進行上下翻轉
leftAxis.axisLineColor = [UIColor clearColor]; // Y軸顏色
leftAxis.labelPosition = YAxisLabelPositionOutsideChart; // label位置
leftAxis.labelTextColor = [UIColor greenColor]; // 文字顏色
leftAxis.labelFont = [UIFont systemFontOfSize:10.0f]; // 文字字體
leftAxis.gridColor = [UIColor yellowColor]; // 網格線顏色
leftAxis.gridAntialiasEnabled = YES; // 開啟抗鋸齒
[leftAxis setXOffset:10.0f];
_barChartView.legend.enabled = NO; // 是否 顯示圖例說明
_barChartView.descriptionText = @""; // 對于顯示的圖描述 不顯示，就設為空字符串即可
// 氣泡顯示 用的是 Charts demo中的兩個Swift 文件， 已經將直角，變?yōu)閳A角
//兩個Swift文件是 BalloonMarker.swift 與 XYMarkerView.swift 這兩個文件根據我自己項目需求已經進
行調整修改
//調用Swift 文件 -> #import"ChartsTestDemo-Swift.h"http:// oc中調用Swift文件 #import"項目名稱-Swift.h"
XYMarkerView *marker = [[XYMarkerView alloc] initWithColor:[UIColor blueColor]
font:[UIFont systemFontOfSize:12.0]
textColor:UIColor.whiteColor
insets:UIEdgeInsetsMake(3.0, 3.0, 16.0, 3.0)
xAxisValueFormatter:_barChartView.xAxis.valueFormatter];
marker.chartView = _barChartView;
marker.minimumSize = CGSizeMake(30.0f, 15.0f);
_barChartView.marker = marker;
[self setData];
}
}
- (void)setData {
//對應Y軸上面需要顯示的數據
NSMutableArray *yVals = [[NSMutableArray alloc] init];
for (int i = 0; i < _dataArr.count; i++) {
BarChartDataEntry *entry = [[BarChartDataEntry alloc] initWithX:[_dataTitleArr[i] doubleValue]
y:[_dataArr[i] doubleValue]
icon:[UIImage imageNamed:@""]];
[yVals addObject:entry];
}
BarChartDataSet *set1 = [[BarChartDataSet alloc] initWithValues:yVals label:@"The year 2017"];
[set1 setColor:[UIColor blueColor]]; // 設置柱子顏色
set1.highlightColor = [UIColor orangeColor]; // 選中時高亮的顏色
set1.drawValuesEnabled = NO; // 是否在柱形圖上面顯示數值
set1.highlightEnabled = YES; // 點擊選中柱形圖是否有高亮效果，（雙擊空白處取消選中）
set1.drawIconsEnabled = NO;
NSMutableArray *dataSets = [[NSMutableArray alloc] init];
[dataSets addObject:set1];
BarChartData *data = [[BarChartData alloc] initWithDataSets:dataSets];
[data setValueFont:[UIFont fontWithName:@"HelveticaNeue-Light" size:10.f]];
data.barWidth = 0.5f;
//為柱形圖提供數據
_barChartView.data = data;
// 默認高亮坐標 注釋掉 將不會有默認選項
[_barChartView highlightValue:[[ChartHighlight alloc] initWithX:[_dataTitleArr[_dataTitleArr.count - 1] doubleValue]
y:[_dataArr[_dataArr.count - 1] doubleValue]
dataSetIndex:0]];
}
自定義X軸值
自定義 DateValueFormatter 文件 遵守 協(xié)議 < IChartAxisValueFormatter > 需要導入橋接文件
重寫初始化方法
- (id)initWithArr:(NSArray*)arr;
實現方法
- (id)initWithArr:(NSArray*)arr {
if(self= [superinit];) {
_arr= arr;
}
returnself;
}
方法重寫
- (NSString*)stringForValue:(double)value axis:(ChartAxisBase*)axis {
return _arr[(NSInteger)value];
}
鏈接：github.com/LHWen/ChartsTestDemo.git
該鏈接包含了Charts框架的餅圖、折線、柱狀圖的基礎使用，折線圖X軸 沒有使用自定義，自定義的方法寫在柱狀圖的文件中，已添加好注釋，需要的可以按照柱狀圖里面的方式使用，氣泡的顯示以及樣式，可以通過修改定義氣泡的兩個Swift文件中的代碼進行自己的樣式需要。第一次寫技術性文章，也是對自己使用的一次性總結，如有錯誤處，請指正，謝謝！
2017-07-05
