iOS-Charts（BarChartView）

Charts - BarChartView

初始化

- (BarChartView *)chartView{
    if (!_chartView) {
        _chartView = [[BarChartView alloc]init];
        _chartView.delegate = self;
        
        ///外观样式
        //BarChartView
        _chartView.backgroundColor = [UIColor whiteColor];
        //没有数据时的文字提示
        _chartView.noDataText = @"没有数据";
        //数值显示在柱形的上面还是下面
        _chartView.drawValueAboveBarEnabled = YES;
        //是否绘制柱形的阴影背景
        _chartView.drawBarShadowEnabled = NO;
        //交互设置
        //取消Y轴缩放
        _chartView.scaleYEnabled = NO;
        //取消双击缩放
        _chartView.doubleTapToZoomEnabled = NO;
        //启用拖拽图表
        _chartView.dragEnabled = YES;
        //拖拽后是否有惯性效果
        _chartView.dragDecelerationEnabled = YES;
        //拖拽后惯性效果的摩擦系数(0~1)，数值越小，惯性越不明显
        _chartView.dragDecelerationFrictionCoef = 0.5;
        
        
        ///X 轴
        ChartXAxis *xAxis = _chartView.xAxis;
        xAxis.axisLineWidth = 0.5;//设置X轴线宽
        //X轴的显示位置
        xAxis.labelPosition = XAxisLabelPositionBottom;
        //不绘制网格线
        xAxis.drawGridLinesEnabled = NO;
        //设置label间隔，若设置为1，每个柱形下面都会显示label
        xAxis.spaceMin = 1;
        xAxis.labelTextColor = [UIColor lightGrayColor];//label文字颜色
        xAxis.axisLineColor =  [UIColor redColor];//轴颜色
        ///间隔
        xAxis.granularity = 1.0;
        
        ///Y轴
        
        //不绘制右边轴
        _chartView.rightAxis.enabled = NO;
        ChartYAxis *leftAxis = _chartView.leftAxis;
        //不强制绘制制定数量的label
        leftAxis.forceLabelsEnabled = NO;
        //设置Y轴的最小值
        leftAxis.axisMinimum = 0;
        //从0开始绘制
        leftAxis.drawZeroLineEnabled = YES;
        //设置Y轴的最大值(配合数据源设置，也可不设置)
        leftAxis.axisMaximum = 50;
        //是否将Y轴进行上下翻转
        leftAxis.inverted = NO;
        //Y轴线宽
        leftAxis.axisLineWidth = 0.5;
        leftAxis.axisLineColor = [UIColor lightGrayColor];//Y轴颜色
        
        leftAxis.zeroLineColor = [UIColor lightGrayColor];
        //label位置
        leftAxis.labelPosition = YAxisLabelPositionOutsideChart;
        //文字颜色
        leftAxis.labelTextColor = [UIColor lightGrayColor];
        //文字字体
        leftAxis.labelFont = [UIFont systemFontOfSize:10.0f];
        
        //设置虚线样式的网格线
        leftAxis.gridLineDashLengths = @[@3.0f, @3.0f];
        //网格线颜色
        leftAxis.gridColor = [UIColor lightGrayColor];
        leftAxis.gridAntialiasEnabled = YES;//开启抗锯齿
        
        //设置Y轴显示
        NSNumberFormatter *leftAxisFormatter = [[NSNumberFormatter alloc] init];
        leftAxisFormatter.positiveSuffix = @"分";
        leftAxis.valueFormatter = [[ChartDefaultAxisValueFormatter alloc] initWithFormatter:leftAxisFormatter];
        
        ///图例说明
        _chartView.legend.enabled = YES;
        _chartView.legend.verticalAlignment = ChartLegendVerticalAlignmentTop;
        _chartView.legend.horizontalAlignment = ChartLegendHorizontalAlignmentRight;
        _chartView.legend.form = ChartLegendFormCircle;
        _chartView.legend.yOffset = 20;
        
    }
    return _chartView;
}

代理<ChartViewDelegate>

#pragma mark 图表中数值被选中
-(void)chartValueSelected:(ChartViewBase *)chartView entry:(ChartDataEntry *)entry highlight:(ChartHighlight *)highlight{
    
}

#pragma mark 图表中的空白区域被选中
-(void)chartValueNothingSelected:(ChartViewBase *)chartView{
}

#pragma mark 图表被缩放
-(void)chartScaled:(ChartViewBase *)chartView scaleX:(CGFloat)scaleX scaleY:(CGFloat)scaleY{
}

#pragma mark 图表被移动
-(void)chartTranslated:(ChartViewBase *)chartView dX:(CGFloat)dX dY:(CGFloat)dY{

}

设置单个柱状图数据源

- (BarChartData *)barSingleData{
    //X轴底部数据
    NSMutableArray<NSString *> *xVals = [[NSMutableArray alloc] init];
    //对应Y轴（柱状图数据）
    NSMutableArray *yVals = [[NSMutableArray alloc] init];

    double dataSetMax = 0;
    
    for (int i = 0; i < _count; i++) {
        double value =  arc4random()%60 + 6;
        dataSetMax = MAX(value, dataSetMax);
        BarChartDataEntry *entry = [[BarChartDataEntry alloc] initWithX:i y:value];
        [yVals addObject:entry];

        [xVals addObject:[NSString stringWithFormat:@"k-%d",i]];
    }
    self.xValues = xVals;
    ///X 轴
    ChartXAxis *xAxis = self.chartView.xAxis;
    xAxis.labelCount = _count;
    ChartIndexAxisValueFormatter *valueFormatter = [[ChartIndexAxisValueFormatter alloc]initWithValues:xVals];
    xAxis.valueFormatter = valueFormatter;
    
    ChartYAxis *leftAxis = self.chartView.leftAxis;
    leftAxis.axisMaximum = dataSetMax;
    BarChartDataSet *set1 = [[BarChartDataSet alloc] initWithEntries:yVals label:@"柱状图-图例说明"];
    //是否在柱形图上面显示数值
    set1.drawValuesEnabled = YES;
    //点击选中柱形图是否有高亮效果
    set1.highlightEnabled = NO;
    //柱状图颜色
    [set1 setColor:[UIColor paleVioletRed]];
    
    NSNumberFormatter *set1Formatter = [[NSNumberFormatter alloc] init];
    set1Formatter.numberStyle = NSNumberFormatterDecimalStyle;
    set1Formatter.positiveSuffix = @"分";
    set1.valueFormatter = [[ChartDefaultValueFormatter alloc] initWithFormatter:set1Formatter];
    set1.axisDependency = AxisDependencyRight;
    BarChartData *data = [[BarChartData alloc] initWithDataSets:@[set1]];
    //文字字体
    data.barWidth = 0.6;
    [data setValueFont:[UIFont fontWithName:@"HelveticaNeue-Light" size:10.f]];
    //文字颜色
    [data setValueTextColor:[UIColor paleVioletRed]];
   
    return data;
}

 加载数据源

self.chartView.data = [self barSingleData];
[self.chartView animateWithYAxisDuration:0.25f];

设置多个柱状图组数据源

//为柱形图设置数据
- (BarChartData *)barGroupData{
    //X轴底部数据
    NSMutableArray<NSString *> *xVals = [[NSMutableArray alloc] init];
    //对应Y轴（柱状图数据）
    NSMutableArray *yVals1 = [[NSMutableArray alloc] init];
    //对应Y轴（柱状图数据）
    NSMutableArray *yVals2 = [[NSMutableArray alloc] init];
    //对应Y轴（柱状图数据）
    NSMutableArray *yVals3 = [[NSMutableArray alloc] init];
    
    //对应Y轴（柱状图数据）
    NSMutableArray *yVals4 = [[NSMutableArray alloc] init];
    
    double dataSetMax = 0;
//    float groupSpace = 0.2;
//    float barSpace = 0.05;
//    float barWidth = 0.15;
    
    float groupSpace = 0.3;
    float barSpace = 0.05;
    float barWidth = 0.3;
    
    for (int i = 0; i < _count; i++) {
        double value1 =  arc4random()%60 + 6;
        double value2 =  arc4random()%65 + 6;
        double value3 =  arc4random()%65 + 2;
        double value4 =  arc4random()%30 + 2;
        
        dataSetMax = MAX(value1, dataSetMax);
        dataSetMax = MAX(value2, dataSetMax);
        dataSetMax = MAX(value3, dataSetMax);
        
        dataSetMax = MAX(value4, dataSetMax);
        
        BarChartDataEntry *entry1 = [[BarChartDataEntry alloc] initWithX:i y:value1];
        [yVals1 addObject:entry1];

        BarChartDataEntry *entry2 = [[BarChartDataEntry alloc] initWithX:i y:value2];
        [yVals2 addObject:entry2];
        
        BarChartDataEntry *entry3 = [[BarChartDataEntry alloc] initWithX:i y:value3];
        [yVals3 addObject:entry3];
        
        BarChartDataEntry *entry4 = [[BarChartDataEntry alloc] initWithX:i y:value4];
        [yVals4 addObject:entry4];
        
        [xVals addObject:[NSString stringWithFormat:@"k-%d",i]];
    }
    self.xValues = xVals;
   
    
    BarChartDataSet *set1 = [[BarChartDataSet alloc] initWithEntries:yVals1 label:@"图例说明1"];
    //是否在柱形图上面显示数值
    set1.drawValuesEnabled = YES;
    //点击选中柱形图是否有高亮效果
    set1.highlightEnabled = NO;
    //柱状图颜色
    [set1 setColor:[UIColor paleVioletRed]];
    set1.valueTextColor = [UIColor paleVioletRed];


    
    BarChartDataSet *set2 = [[BarChartDataSet alloc] initWithEntries:yVals2 label:@"图例说明2"];
    //是否在柱形图上面显示数值
    set2.drawValuesEnabled = YES;
    //点击选中柱形图是否有高亮效果
    set2.highlightEnabled = NO;
    //柱状图颜色
    [set2 setColor:[UIColor rosyBrown]];
    set2.valueTextColor = [UIColor rosyBrown];

    
    
    BarChartDataSet *set3 = [[BarChartDataSet alloc] initWithEntries:yVals3 label:@"图例说明3"];
    //是否在柱形图上面显示数值
    set3.drawValuesEnabled = YES;
    //点击选中柱形图是否有高亮效果
    set3.highlightEnabled = NO;
    //柱状图颜色
    [set3 setColor:[UIColor darkCyan]];
    set3.valueTextColor = [UIColor darkCyan];

    BarChartDataSet *set4 = [[BarChartDataSet alloc] initWithEntries:yVals4 label:@"图例说明4"];
    //是否在柱形图上面显示数值
    set4.drawValuesEnabled = YES;
    //点击选中柱形图是否有高亮效果
    set4.highlightEnabled = NO;
    //柱状图颜色
    [set4 setColor:[UIColor darkSlateGray]];
    set4.valueTextColor = [UIColor darkSlateGray];
    
    
    BarChartData *data = [[BarChartData alloc] initWithDataSets:@[set1,set3]];
    //文字字体
    data.barWidth = barWidth;
    [data setValueFont:[UIFont fontWithName:@"HelveticaNeue-Light" size:10.f]];
    //文字颜色
//    [data setValueTextColor:[UIColor forestGreen]];
    ///X 轴
    ChartXAxis *xAxis = self.chartView.xAxis;
    xAxis.labelCount = _count;
    ChartIndexAxisValueFormatter *valueFormatter = [[ChartIndexAxisValueFormatter alloc]initWithValues:xVals];
    xAxis.valueFormatter = valueFormatter;
    
    ChartYAxis *leftAxis = self.chartView.leftAxis;
    leftAxis.axisMaximum = dataSetMax;
    
    
    self.chartView.xAxis.axisMaximum = -0.5 + [data groupWidthWithGroupSpace:groupSpace barSpace: barSpace] * xVals.count;
    [self.chartView.xAxis setLabelCount:xVals.count];
    [data groupBarsFromX: -0.5 groupSpace: groupSpace barSpace: barSpace];
    
    return data;
}

 加载数据源

self.chartView.data = [self barGroupData];
[self.chartView animateWithYAxisDuration:0.25f]

 

 多组柱状图设置注意事项

（barWidth + barSpace）* 组内个数 + groupSpace = 1.00->每个"组"的间隔 granularity

self.chartView.xAxis.axisMaximum = -0.5 + [data groupWidthWithGroupSpace:groupSpace barSpace: barSpace] * xVals.count;
[data groupBarsFromX: -0.5 groupSpace: groupSpace barSpace: barSpace];

设置初始可见数量

需设置数据源后设置，设置可见数量后，可滑动显示其后面数据

[self.chartView setVisibleXRangeMaximum:7];

设置X轴 Label 旋转 角度

self.chartView.xAxis.labelRotationAngle = -30;

自定义 valueFormatter

以柱形图上面显示数值为例，自定义 valueFormatter ，首先创建 自定义 valueFormatter 文件，实现相关代理（同理X轴与Y轴也可自定义）

@interface KBarValueFormatter : NSObject<IChartValueFormatter>
@property (weak, nonatomic) id<IChartValueFormatter> delegate;
@property (strong, nonatomic) NSNumberFormatter * formatter;
- (instancetype)initWithNumber:(NSNumberFormatter *)formatter;
@end

@implementation KBarValueFormatter
- (instancetype)initWithNumber:(NSNumberFormatter *)formatter{
    
    if (self = [super init]) {
        self.delegate = self;
        self.formatter = formatter;
    }
    
    return self;
}

- (NSString *)stringForValue:(double)value entry:(ChartDataEntry *)entry dataSetIndex:(NSInteger)dataSetIndex viewPortHandler:(ChartViewPortHandler *)viewPortHandler{
    return [[self.formatter stringForObjectValue:@(value)] stringByAppendingFormat:@"-%d",arc4random()%9];
}
@end

 初始化自定义valueFormatter

- (KBarValueFormatter *)barValueFormatter{
    if (!_barValueFormatter) {
        NSNumberFormatter *set1Formatter = [[NSNumberFormatter alloc] init];
        set1Formatter.numberStyle = NSNumberFormatterDecimalStyle;
        set1Formatter.positiveSuffix = @"分";
        _barValueFormatter = [[KBarValueFormatter alloc]initWithNumber:set1Formatter];
    }
    return _barValueFormatter;
}

设置 BarChartDataSet 的 valueFormatter

set1.valueFormatter = self.barValueFormatter.delegate;

 

关于 makerView

自定义一个基于UIView 的 makerView，同时需要将柱状图的点击高亮打开

set1.highlightEnabled = YES;
[set1 setHighlightColor:[UIColor paleVioletRed]];

初始化 makerView

- (KBarMarkerView *)barMarkerView{
    if (!_barMarkerView) {
        _barMarkerView = [[KBarMarkerView alloc]init];
        _barMarkerView.frame = (CGRect){0,0,120,60};
    }
    return _barMarkerView;
}

配置 makerView

ChartMarkerView *makerView = [[ChartMarkerView alloc]init];
makerView.offset = CGPointMake(- self.barMarkerView.frame.size.width/2,-self.barMarkerView.frame.size.height);
makerView.chartView = self.chartView;
self.chartView.marker = makerView;
[makerView addSubview:self.barMarkerView];