1. 程式人生 > >在Objective-C專案中使用ios-charts

在Objective-C專案中使用ios-charts

最近準備在OC專案中使用charts,怕以後忘記、記錄一下使用步驟。charts是一個功能強大的圖表元件,使用的是swift語言編寫,所以就涉及到混編的一些操作配置。

使用條件:

這裡寫圖片描述

下載完成解壓後主要使用charts資料夾:

主要使用charts資料夾

配置步驟:

1、首先新建一個專案(我這裡把工程命名為ChartsTest),把之前下載好的Charts資料夾拖到工程主目錄下。

2、右擊專案,選擇-》Add Files to”xx”,在彈出的選擇檔案框中選擇”Charts.xcodeproj”(注意:不要選擇資料夾)。

這裡寫圖片描述

這裡寫圖片描述

現在專案變成了這個樣子

這裡寫圖片描述

3、編譯Charts-ios。

這裡寫圖片描述

這裡寫圖片描述

這裡寫圖片描述

4、新增Charts.framework到專案中。

這裡寫圖片描述

這裡寫圖片描述

5、建立用於oc和swift混編的橋接檔案(*.h檔案)(我這裡命名為:Charts-Bridging.h),並在橋接檔案裡面匯入Charts。

這裡寫圖片描述

當然建立這個橋接檔案也有一個便利的方法,就是直接在專案中新建一個(*.swift)的檔案,系統會彈出提示詢問你是否要新建橋接檔案,選擇建立就行了。這裡我就不做截圖了有興趣的自己去試一下。

6、橋接檔案和開啟混編配置。

這裡寫圖片描述

到此為止我們的配置就完成了,接下來我說一下在專案使用圖表控制元件。

使用步驟:

1、在ViewController中匯入下面兩個檔案。

#import "Charts-Bridging.h"
#import "ChartsTest-Swift.h"

2、在ViewController中新增如下程式碼。

@interface ViewController ()<ChartViewDelegate>

@property(nonatomic,strong)LineChartView *chartView;
@property(nonatomic,retain)LineChartData *lineChartData;

@end

@implementation ViewController

- (void
)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. _chartView = [[LineChartView alloc]init]; [self.view addSubview:_chartView]; _chartView.frame = CGRectMake(0, 40, self.view.frame.size.width, self.view.frame.size.height - 80); _chartView.descriptionText = @"xxx描述"; _chartView.noDataText = @"沒有資料"; _chartView.noDataTextDescription = @"沒有更多的資料詳細描述"; _chartView.dragEnabled = YES;//設定圖表裡能不能被拖動 [_chartView setScaleEnabled:YES];//設定圖表能不能被放大 _chartView.pinchZoomEnabled = NO; _chartView.drawGridBackgroundEnabled = YES; _chartView.delegate = self; _chartView.xAxis.labelPosition = XAxisLabelPositionBottom;//設定x軸在下面顯示,預設是在上面 _chartView.data = self.lineChartData;//設定資料 } -(LineChartData *)lineChartData{ NSMutableArray *xVals = [[NSMutableArray alloc]initWithCapacity:12]; for (int i = 0; i < 12; i++) { [xVals addObject:[NSString stringWithFormat:@"%d月",i+1]]; } NSMutableArray *yVals = [[NSMutableArray alloc] init]; for (int i = 0; i < 12; i++) { double mult = (12 + 1); double val = (double) (arc4random_uniform(mult)) + 3; [yVals addObject:[[ChartDataEntry alloc] initWithValue:val xIndex:i]]; } NSMutableArray *yVals2 = [[NSMutableArray alloc] init]; for (int i = 0; i < 12; i++) { double mult = (12 + 1); double val = (double) (arc4random_uniform(mult)) + 13; [yVals2 addObject:[[ChartDataEntry alloc] initWithValue:val xIndex:i]]; } LineChartDataSet *set1 = nil; LineChartDataSet *set2 = nil; if (_chartView.data.dataSetCount > 0) { set1 = (LineChartDataSet *)_chartView.data.dataSets[0]; set1.yVals = yVals; _chartView.data.xValsObjc = xVals; [_chartView notifyDataSetChanged]; } else { set1 = [[LineChartDataSet alloc] initWithYVals:yVals label:@"lineChartData 1"]; //set1.lineDashLengths = @[@5.f, @2.5f]; //set1.highlightLineDashLengths = @[@5.f, @2.5f]; [set1 setColor:UIColor.blackColor]; [set1 setCircleColor:UIColor.blackColor]; set1.lineWidth = 1.0; set1.circleRadius = 3.0; set1.drawCircleHoleEnabled = NO; set1.valueFont = [UIFont systemFontOfSize:9.f]; //set1.fillAlpha = 65/255.0; //set1.fillColor = UIColor.blackColor; NSArray *gradientColors = @[ (id)[ChartColorTemplates colorFromString:@"#00ff0000"].CGColor, (id)[ChartColorTemplates colorFromString:@"#ffff0000"].CGColor ]; CGGradientRef gradient = CGGradientCreateWithColors(nil, (CFArrayRef)gradientColors, nil); set1.fillAlpha = 1.f; set1.fill = [ChartFill fillWithLinearGradient:gradient angle:90.f]; set1.drawFilledEnabled = YES; CGGradientRelease(gradient); set2 = [[LineChartDataSet alloc] initWithYVals:yVals2 label:@"lineChartData 2"]; // set2.lineDashLengths = @[@5.f, @2.5f]; // set2.highlightLineDashLengths = @[@5.f, @2.5f]; [set2 setColor:UIColor.yellowColor];//設定set2線條的顏色 [set2 setCircleColor:UIColor.purpleColor];//設定set2的小圓圈的顏色 set2.lineWidth = 1.0; set2.circleRadius = 3.0; set2.drawCircleHoleEnabled = NO; set2.valueFont = [UIFont systemFontOfSize:9.f]; _lineChartData = [[LineChartData alloc] initWithXVals:xVals dataSets:@[set1,set2]]; } return _lineChartData; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } @end

3、編譯執行

這裡寫圖片描述

出現上面圖的這個結果說明你已經成功了。
如果有使用api方面的問題可以參考 MPAndroidChart。