在Objective-C專案中使用ios-charts
阿新 • • 發佈:2019-02-09
最近準備在OC專案中使用charts,怕以後忘記、記錄一下使用步驟。charts是一個功能強大的圖表元件,使用的是swift語言編寫,所以就涉及到混編的一些操作配置。
使用條件:
下載完成解壓後主要使用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。