Charts图形化框架的基础使用
2017-07-05 本文已影响276人
沉睡一夏
这篇文章主要讲述Chats框架的新的赋值方式，因为在网络上有同行已经分享过Charts框架的使用方式了，我也是看了他们分享的文章 (大部分代码都是借鉴于他们的，谢谢他们的分享) 同时结合Charts框架自带的Demo了解到新赋值方式。
框架的导入：
-
1 我使用的cocoapods 进行导入 Charts 框架
导入时需要注意： pod 'Charts' 后面需要添加 use_frameworks! 。 -
2 由于Charts框架使用的是Swift 编写，需要添加Swift与OC间的桥接文件：
随意创建一个 Swift 文件将会弹出以下对话框，选中默认的 Create Bridging Header 将会自动生成一个桥接文件
例如：我创建一个Swift文件后生成的桥接文件（一个 .h 文件） ChartsTestDemo-Bridging-Header.h
创建Swift文件时 会自动弹出 创建桥接文件的弹框
-
3 在桥接文件中引入 Charts 框架 @import Charts; （如果pod 框架成功 提示找不到该文件时，关闭Xcode 重启一下，原因可能是开发工具的问题）。
-
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 文件， 已经将直角，变为圆角
//两个Swift文件是 BalloonMarker.swift 与 XYMarkerView.swift 这两个文件根据我自己项目需求已经进
行调整修改
//调用Swift 文件 -> #import"ChartsTestDemo-Swift.h"// 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 文件 遵守 协议 < 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
