zoukankan      html  css  js  c++  java
  • iOS 图表工具charts之BarChartView

    关于charts的系列视图介绍传送门:
    iOS 图表工具charts介绍
    iOS 图表工具charts之LineChartView
    iOS 图表工具charts之BarChartView
    iOS 图表工具charts之PieChartView
    iOS 图表工具charts之CandleStickChartView
    iOS 图表工具charts之CombinedChartView

    BarChartView在charts中可以用来绘制柱状图,由于charts是基于swift开发的,如果需要和objective-C混编(通过pod的方式不用管),可以参考我的上几篇文章《iOS OC中桥接swift第三方库》,这里主要讲的是LineChartView的一些常用属性和一些基本用法,实际情况以开发为准

    chartView的更加细节的属性设置 请查看我的上篇文章《iOS 图表工具charts之LineChartView》,因为BarChartView大部分基础属性都差不多,这里就不详细写注释了
    BarChartView的基础设置

    -(void)setupUI{
        //BarChartView默认纵向展示柱状图, 如果需要横向展示 则创建HorizontalBarChartView即可
        BarChartView *chartView = [[BarChartView alloc] init];
        //设置偏移
        [chartView setExtraOffsetsWithLeft:10 top:10 right:10 bottom:10];
        //开启border
        chartView.drawBordersEnabled = YES;
        chartView.borderLineWidth = .5f;
        chartView.borderColor = UIColor.blackColor;
        //设置背景
        chartView.drawGridBackgroundEnabled = NO;
        chartView.gridBackgroundColor = [UIColor grayColor];
        //无内容显示
        chartView.noDataText = @"";
        //关闭描述
        chartView.chartDescription.enabled = NO;
        chartView.chartDescription.text = @"tiny`s barChart demo";
        //关闭图例
        chartView.legend.enabled = NO;
        //缩放
        chartView.scaleXEnabled = NO;
        chartView.scaleYEnabled = NO;
        chartView.autoScaleMinMaxEnabled = YES;
        chartView.highlightPerTapEnabled = NO;
        chartView.highlightPerDragEnabled = NO;
        chartView.pinchZoomEnabled = NO;  //手势捏合
        chartView.dragEnabled = YES;
        chartView.dragDecelerationFrictionCoef = 0.5;  //0 1 惯性
        //代理
        chartView.delegate = self;
        
        //leftAxis
        ChartYAxis *leftAxis = chartView.leftAxis;
        leftAxis.enabled = YES;
        leftAxis.labelPosition = YAxisLabelPositionOutsideChart;
        leftAxis.drawGridLinesEnabled = YES;
        leftAxis.gridLineDashLengths = @[@2,@4];
        leftAxis.labelTextColor = UIColor.blackColor;
        leftAxis.labelFont = [UIFont systemFontOfSize:10];
        leftAxis.decimals = 2;
        //设置样式
        LeftAxisFormatter *leftFormatter = [LeftAxisFormatter new];
        leftAxis.valueFormatter = leftFormatter;
        
        //rightAxis
        ChartYAxis *rightAxis = chartView.rightAxis;
        rightAxis.enabled = NO;
        
        //xAxis
        ChartXAxis *xAxis = chartView.xAxis;
        xAxis.enabled = YES;
        xAxis.labelPosition = XAxisLabelPositionBottom;
        //不画线
        xAxis.drawGridLinesEnabled = NO;
        BarxAxisFormatter *xFormatter = [BarxAxisFormatter new];
        xAxis.valueFormatter = xFormatter;
        xFormatter.titles = @[@"语文",@"数学",@"外语",@"物理"];
        self.charView = chartView;
        [self addSubview:self.charView];
        [self.charView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.edges.mas_offset(0);
        }];
        
        //draw
        [self drawData];
        //执行动画
        [self.charView animateWithYAxisDuration:1.f];
    }
    
    
    -(void)drawData{
        NSArray *datas = @[@100,@90,@76,@55,@45,@77,@98,@62];
        NSMutableArray *array = [NSMutableArray array];
        for (int i = 0; i < datas.count; i++) {
            BarChartDataEntry *entry = [[BarChartDataEntry alloc] initWithX:i y:[datas[i] integerValue]];
            [array addObject:entry];
        }
        //set
        BarChartDataSet *set = [[BarChartDataSet alloc] initWithEntries:array label:@"Bar DataSet"];
        [set setColors:@[UIColor.redColor,UIColor.blueColor,UIColor.blueColor,UIColor.blackColor,UIColor.cyanColor,UIColor.grayColor,UIColor.greenColor,UIColor.cyanColor]];
        //显示柱图值并格式化
        NSNumberFormatter *numberFormatter = [[NSNumberFormatter alloc] init];
        numberFormatter.positiveSuffix = @"分";
        ChartDefaultValueFormatter *formatter = [[ChartDefaultValueFormatter alloc] initWithFormatter:numberFormatter];
        [set setValueFormatter:formatter];
        set.highlightEnabled = NO;
        BarChartData *data = [[BarChartData alloc] initWithDataSet:set];
        self.charView.data = data;
    }
    
    #pragma mark - ChartViewDelegate
    #pragma mark 图表中数值被选中
    -(void)chartValueSelected:(ChartViewBase *)chartView entry:(ChartDataEntry *)entry highlight:(ChartHighlight *)highlight{
        
    //    NSLog(@"图表中数值被选中");
    }
    
    #pragma mark 图表中的空白区域被选中
    -(void)chartValueNothingSelected:(ChartViewBase *)chartView{
    //    NSLog(@"空白区域被选中");
    }
    
    #pragma mark 图表被缩放
    -(void)chartScaled:(ChartViewBase *)chartView scaleX:(CGFloat)scaleX scaleY:(CGFloat)scaleY{
    //    NSLog(@"图表被缩放");
    }
    
    #pragma mark 图表被移动
    -(void)chartTranslated:(ChartViewBase *)chartView dX:(CGFloat)dX dY:(CGFloat)dY{
    //    NSLog(@"图表被移动");
    }
    

    一些需要注意的点:
    1.如果需要给每个bar显示的数字格式化比如 100分, 100t,100g等等添加前缀或者后缀,则可以设置BarChartDataSet属性

        NSNumberFormatter *numberFormatter = [[NSNumberFormatter alloc] init];
        numberFormatter.positiveSuffix = @"分";
        ChartDefaultValueFormatter *formatter = [[ChartDefaultValueFormatter alloc] initWithFormatter:numberFormatter];
        [set setValueFormatter:formatter];
    

    2.柱状图动画效果

        //执行动画
        [self.charView animateWithYAxisDuration:1.f];
    

    3.颜色可以没每个柱子设置颜色

        [set setColors:@[UIColor.redColor,UIColor.blueColor,UIColor.blueColor,UIColor.blackColor,UIColor.cyanColor,UIColor.grayColor,UIColor.greenColor,UIColor.cyanColor]];
    

    4.每个点的数值要显示出来

        set.drawValuesEnabled = YES;
    

    5.柱状图横向显示,只需要将BarChartView换成HorizontalBarChartView即可,其他不变 效果图如下:

    6.BarChartData可以添加多个柱子

     BarChartData *data = [[BarChartData alloc] init]
     [data addDataSet:set]
    

    转载请标注来源:https://www.cnblogs.com/qqcc1388/

  • 相关阅读:
    JavaScript Eval 函数使用
    WPFToolkit Calendar & DatePicker 使用介绍
    Windows Mobile 6.5 配置环境,数据库访问,部署简单实例
    ThreadPool.QueueUserWorkItem 方法 (WaitCallback)
    Windws Mobile 6.5 Professional ADO.NET数据访问
    WPF调用Web Services
    c#中Interface的理解
    PagesSection.MaintainScrollPositionOnPostBack 属性
    EclipseRCP中文语言包版本不一致,导致导出错误
    SWT美化开源控件网站
  • 原文地址:https://www.cnblogs.com/qqcc1388/p/11171939.html
Copyright © 2011-2022 走看看