美文网首页Charts框架系列《OC专栏》iOS
iOS-charts框架之柱状图详解

iOS-charts框架之柱状图详解

作者: 不够果断是种癌 | 来源:发表于2018-04-13 14:44 被阅读283次

    前面几篇文章是《charts框架的集成》《charts饼状图》《charts折线图》,建议大家结合起来看,这样更详细。

    传送门:

    《charts框架之折线图详解》

    《charts框架集成详解》

    《charts框架饼状图详解》

    下方是柱状图效果图: 

    核心代码如下,大家可以按照自己的需求,修改下方配置:

    // 初始化

     _barChartView = [[BarChartView alloc] init];

    _barChartView.frame = CGRectMake(5, 64, kSCREEN_WIDTH, kSCREEN_HEIGHT-200 );

     [self.view addSubview:_barChartView];

    -------------------------------柱状图的配置-----------------------------

    // 设置XY轴动画

    [_barChartView  animateWithYAxisDuration:1.0f];

    [_barChartView  animateWithXAxisDuration:1.0f];

    // 是否绘制阴影背景

    _barChartView.drawBarShadowEnabled = NO; 

    // 数值显示是否在条柱上面

    _barChartView.drawValueAboveBarEnabled = YES; 

    // 没有数据的时候的显示

    _barChartView.noDataText = @"暂无此产品的价格趋势";

    _barChartView.noDataFont = [UIFont systemFontOfSize:15];

    _barChartView.noDataTextColor = [UIColor grayColor];

    // 数值显示是否在条柱上面

    _barChartView.drawValueAboveBarEnabled = YES; 

    // 是否画右边坐标轴

    _barChartView.rightAxis.enabled = NO; 

    // 是否画图例(图例的具体配置可参照我的饼状图)

     _barChartView.legend.enabled = NO;

    // 是否可以拖拽设置

     _barChartView.dragEnabled = YES;

    // 双击是否缩放

    _barChartView.doubleTapToZoomEnabled = NO; 

    // XY轴是否缩放

     _barChartView.scaleXEnabled = NO;//X轴缩放

     _barChartView.scaleYEnabled = NO;//Y轴缩放

    // XY轴是否可以同时缩放

    _barChartView.pinchZoomEnabled = NO; 

    // 是否开启描述label

     _barChartView.chartDescription.enabled = NO; 

    ----------------------配置折现图上面的浮层--------------

    // 设置浮层

    _barChartView.drawMarkers = YES;

    ChartMarkerView * makerView = [[ChartMarkerView alloc]init];

    makerView.offset = CGPointMake(-self.subPriceView.frame.size.width,-self.subPriceView.frame.size.height/2);

    makerView.chartView = _lineChartView;

    _barChartView.marker = makerView;

    [makerView addSubview:self.subPriceView];

    -------------------------------配置X轴-----------------------

    // 获取X轴

     ChartXAxis *xAxis = _barChartView.xAxis; 

    // X轴的显示位置

    xAxis.labelPosition = XAxisLabelPositionBottom; 

    // 是否绘制网格

    xAxis.drawGridLinesEnabled = NO; 

    // X轴数值上面的字体 大小

     xAxis.labelFont = [UIFont fontWithName:@"PingFang-SC-Medium" size:10.0f]; 

    // X轴数值颜色

     xAxis.labelTextColor = [UIColor colorWithRed:153/255.f green:153/255.f blue:153/255.f alpha:1]; 

    // X轴label宽度

     xAxis.labelWidth=5;

    // X轴显示的label数量

     xAxis.labelCount=5;  

    // 设置虚线样式的网格线

     xAxis.gridLineDashLengths = @[@3.0f, @3.0f];

    // 网格线颜色

    xAxis.gridColor = [UIColor colorWithRed:153/255.f green:153/255.f blue:153/255.f alpha:1];

    // 开启抗锯齿

    xAxis.gridAntialiasEnabled = YES;

    // 从0开始绘画

    xAxis.drawZeroLineEnabled = YES;  

    // label位置(像里像外 枚举类型)

    xAxis.labelPosition = 0;   

    ------------------------------Y轴配置---------------------------

    基本配置如X轴 

    下面为补充:

    // 获取Y轴

     ChartYAxis *leftAxis = _barChartView.leftAxis; 

    // 坐标数值样式

     NSNumberFormatter *leftAxisFormatter = [[NSNumberFormatter alloc] init];

    // Y轴坐标最多为1位小数

    leftAxisFormatter.maximumFractionDigits=1; 

    leftAxis.valueFormatter = [[ChartDefaultAxisValueFormatter alloc] initWithFormatter:leftAxisFormatter];

    // 最大值

    leftAxis.axisMaximum=60;

    // 最小值

    leftAxis.axisMinimum=0; 

    // 坐标数值的位置 

    leftAxis.labelPosition = YAxisLabelPositionOutsideChart; 

    // 数值分割个数 

    leftAxis.labelCount=8; 

    // 最大值到顶部的范围比 

    leftAxis.spaceTop=0.15; 

    ------------------------------------设置条状图对象---------------------------

    // bar的颜色

    [set1setColor:[UIColor colorWithRed:219/255.f green:50/255.f blue:59/255.f alpha:1]]; 

    // 数值的颜色

     [set1setValueTextColor: [UIColor whiteColor]];  

    // 是否在bar上显示数值  

    [set1 setDrawValuesEnabled:NO]; 

    // 是否点击有高亮效果,为NO是不会显示marker的效果

    [set1setHighlightEnabled:NO]; 

    -----------------------------------设置数据------------------------------

    BarChartData*data = [[BarChartData alloc]initWithDataSets:dataSets];

    // 设置宽度  柱形之间的间隙占整个柱形(柱形+间隙)的比例

     [datasetBarWidth:0.6];

     [datasetValueFont:[UIFontsystemFontOfSize:10]];

    _barChartView.data = data;

     [_barChartView notifyDataSetChanged];

    ==================第二条柱子实现(只有一根柱子的可以不看)==========

    01.集合内添加2个集合对象。

    02.间距的设置,如果不写这行代码,2根柱子则会重合

     [data groupBarsFromX: startYeargroupSpace: groupSpacebarSpace: barSpace];

    =======================举例如下=======================

    - (void)setDataCount:(int)count {

        NSMutableArray *yVals = [[NSMutableArray alloc] init];

        for(inti =0; i < count; i++) {

            intval = (double) (arc4random_uniform(60))+2;

            [yValsaddObject:[[BarChartDataEntryalloc]initWithX:iy:val]];

        }

        NSMutableArray *yVals2 = [[NSMutableArray alloc] init];

        for(inti =0; i < count; i++) {

            intval2 = (double) (arc4random_uniform(60));

            [yVals2addObject:[[BarChartDataEntryalloc]initWithX:iy:val2]];

        }

    BarChartDataSet *set1 = [[BarChartDataSet alloc] initWithValues:yVals label:@"Set1"];[set1setColor:[UIColor colorWithRed:219/255.f green:50/255.f blue:59/255.f alpha:1]];//bar的颜色

    [set1setDrawValuesEnabled:NO];

    [set1setHighlightEnabled:NO];

    BarChartDataSet *set2 = [[BarChartDataSet alloc] initWithValues:yVals2 label:@"DataSet2"];

     [set2setColor:[UIColor colorWithRed:255/255.f green:152/255.f blue:46/255.f alpha:1]];//bar的颜色

     [set2setDrawValuesEnabled:NO];//是否在bar上显示数值

    [set2setHighlightEnabled:NO];//是否点击有高亮效果,为NO是不会显示marker的效果

    NSMutableArray *dataSets = [[NSMutableArray alloc] init];

    [dataSetsaddObject:set1];

    [dataSetsaddObject:set2];

    BarChartData*data = [[BarChartDataalloc]initWithDataSets:dataSets];

    [datasetBarWidth:0.4];

    [datasetValueFont:[UIFontsystemFontOfSize:10]];

    [datagroupBarsFromX: -0.3 groupSpace: 0.15f barSpace: 0.02f];

    _barChartView.data = data;

    [_barChartView notifyDataSetChanged];

    [_barChartView.data notifyDataChanged];

    }

    有问题的可以加群:191409807  欢迎话痨。喜欢交流的也可以加群,想要demo的同样可以加群。

    相关文章

      网友评论

      本文标题:iOS-charts框架之柱状图详解

      本文链接:https://www.haomeiwen.com/subject/qtmckftx.html