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/