当前位置: 首页>编程语言>正文

Charts图形化框架的基础使用

框架的导入:
  • 1 我使用的cocoapods 进行导入 Charts 框架
    导入时需要注意: pod 'Charts' 后面需要添加 use_frameworks! 。

  • 2 由于Charts框架使用的是Swift 编写,需要添加Swift与OC间的桥接文件:
    随意创建一个 Swift 文件将会弹出以下对话框,选中默认的 Create Bridging Header 将会自动生成一个桥接文件
    例如:我创建一个Swift文件后生成的桥接文件(一个 .h 文件) ChartsTestDemo-Bridging-Header.h


    Charts图形化框架的基础使用,第1张
    创建Swift文件时 会自动弹出 创建桥接文件的弹框
  • 3 在桥接文件中引入 Charts 框架 @import Charts; (如果pod 框架成功 提示找不到该文件时,关闭Xcode 重启一下,原因可能是开发工具的问题)。

  • 4 编译成功,表示该框架就可以用OC的方法进行使用。

  • 5 下面介绍 Charts 柱状图的基本使用,在文章最后将会给出GitHub的链接,是我对饼图、柱状图、折线图的使用。

柱状图的使用:

该柱状图,自定了 X轴值,添加气泡,默认选中其中一项(因为项目需要就以项目为主的样式了)。

Charts图形化框架的基础使用,第2张
样式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

2017-07-05


https://www.xamrdz.com/lan/59b2016283.html

相关文章: