iOS 柱状图的定制

最近因项目需求，要使用柱状图，第三方的东西固然很好，但是我还是想要写一个自己的柱状图，因为更加符合我们项目的需求，日后维护起来也会方便许多。

写了一个自定义视图，可以自定义众多属性，关键是使用起来方便，最少四行就可以了。

废话不多说，上代码：

WQLChartView.h文件：

typedef NS_ENUM(NSInteger ,ChartViewType) {
    ChartViewTypeColumn,
    ChartViewTypePoint
};

@interface WQLChartView : UIView
/**
 *  图表的类型
 */
@property (nonatomic,assign) ChartViewType type;
/**
 *  单列的宽度
 */
@property (nonatomic,assign) CGFloat singleRowWidth;
/**
 *  每个柱子之间的间距
 */
@property (nonatomic,assign) CGFloat singleChartSpace;
/**
 *  x的值 数组
 */
@property (nonatomic,strong) NSArray *xValueArray;
/**
 *  y的值 数组
 */
@property (nonatomic,strong) NSArray *yValueArray;
/**
 *  x轴的右侧标题（比如：时间）
 */
@property (nonatomic,copy) NSString *xAxleTitle;
/**
 *  y轴的顶部标题 （比如：万件）
 */
@property (nonatomic,copy) NSString *yAxleTitle;
/**
 *  y轴上有几个点
 */
@property (nonatomic,assign) NSInteger yAxlePointNumber;
/**
 *  y轴的坐标点 数组
 */
@property (nonatomic,strong) NSArray *yPointArray;
/**
 *  柱子的颜色
 */
@property (nonatomic,strong) UIColor *columnColor;
/**
 *  是否显示线条
 */
@property (nonatomic,assign) BOOL showLine;
/**
 *  连线的颜色
 */
@property (nonatomic,strong) UIColor *lineColor;
/**
 *  连线的宽度（粗细）
 */
@property (nonatomic,assign) CGFloat lineWidth;
/**
 *  点的颜色（只有是point类型才有效）
 */
@property (nonatomic,strong) UIColor *pointColor;
/**
 *  点的宽度（只有point类型才有效）
 */
@property (nonatomic,assign) CGFloat pointWidth;
/**
 *  连接是否使用平滑的曲线
 */
@property (nonatomic,assign) BOOL lineIsCurve;
/**
 *  是否隐藏数值 默认不隐藏
 */
@property (nonatomic,assign) BOOL isHideNumber;
/**
 *  数值的颜色
 */
@property (nonatomic,strong) UIColor *colorOfNumber;
/**
 *  数值的字号
 */
@property (nonatomic,assign) NSInteger fontSizeOfNumber;

//在superView上展示视图 必须调用 参数配置完毕后调用
- (void)showChartInView:(UIView*)superView;

//更新视图
- (void)updateView;

WQLChartView.m文件 核心代码：

#pragma  mark 添加柱状图
- (void)loadColumnShapeWithSingleWidth:(CGFloat)singleW withSpace:(CGFloat)singleSpace
{
    
    CGFloat viewHeight = self.bounds.size.height;
    //如果改动了 则把之前的显示部分移除掉
    if (isChange) {
        [self deletePointLayer];
    }
    
    //如果之前 添加了 则把之前的删了
    if (columnShapeLayerArray.count > 0) {
        for (CAShapeLayer *layer in columnShapeLayerArray) {
            [layer removeFromSuperlayer];
        }
    }
    
    //把之前添加的线 移除掉
    if (lineArray.count > 0) {
        for (CAShapeLayer *lineLayer in lineArray) {
            [lineLayer removeFromSuperlayer];
        }
    }
    
    columnShapeLayerArray = [NSMutableArray array];
    lineArray = [NSMutableArray array];
    
    UIBezierPath *column = [UIBezierPath bezierPath];
    
    CGFloat xPosition = 0;
    if (!topPointYArray) {
        topPointYArray = [NSMutableArray array];
    }else{
        [topPointYArray removeAllObjects];
    }
    
    for (int i = 0; i<xCount; i++) {
        CAShapeLayer *columnLayer = [CAShapeLayer layer];
        //当前的y值
        NSString *value = _yValueArray[i];
        CGFloat yValue = [value floatValue];
        //y值 占坐标最大值的比率
        CGFloat rate = yValue/yMax;
        //单个柱子的高度
        CGFloat singleHeight = (viewHeight-titleWidth-yArrowHeight)*rate;
        
        NSString *topPointY = [NSString stringWithFormat:@"%f",viewHeight-titleWidth-singleHeight];
        [topPointYArray addObject:topPointY];
        
        //x轴 为柱子左下侧的点 y为坐标轴
        [column moveToPoint:CGPointMake(xPosition+singleSpace+titleWidth, viewHeight-titleWidth)];
        //柱子的左侧垂直线
        [column addLineToPoint:CGPointMake(xPosition+singleSpace+titleWidth, viewHeight-titleWidth-singleHeight)];
        //柱子的顶部水平线
        [column addLineToPoint:CGPointMake(xPosition+singleSpace+titleWidth+singleW, viewHeight-titleWidth-singleHeight)];
        //柱子的右侧垂直线
        [column addLineToPoint:CGPointMake(xPosition+singleSpace+titleWidth+singleW, viewHeight-titleWidth)];
        
        if (self.showLine) {
            
            UIBezierPath *line = [UIBezierPath bezierPath];
            
            CAShapeLayer *lineLayer = [CAShapeLayer layer];
            
            if (i>0) {
                //上一个点的y值
                NSString *lastValue = _yValueArray[i-1];
                CGFloat lastYValue = [lastValue floatValue];
                CGFloat lastRate = lastYValue/yMax;
                //取到上一个点的高度
                CGFloat lastSingleHeight = (viewHeight-titleWidth-yArrowHeight)*lastRate;
                
                //移到柱子的顶部中点
                [line moveToPoint:CGPointMake(xPosition+singleSpace+titleWidth+singleW/2, viewHeight-titleWidth-singleHeight)];
                //向上一个点 添加连线
                if (self.lineIsCurve) {
                    //曲线连接
                    //上一个点的x坐标
                    CGFloat lastPointX = xPosition+singleSpace+titleWidth+singleW/2-(singleW+singleSpace);
                    //上一个点的y坐标
                    CGFloat lastPointY = viewHeight - titleWidth-lastSingleHeight;
                    //该柱子顶部中点的x坐标
                    CGFloat pointX = xPosition+singleSpace+titleWidth+singleW/2;
                    //该柱子顶部中点的y坐标
                    CGFloat pointY = viewHeight-titleWidth-singleHeight;
                    //添加曲线 两个控制点 x为两个点的中间点 y为首末点的y坐标 为了实现平滑连接
                    [line addCurveToPoint:CGPointMake(lastPointX, lastPointY) controlPoint1:CGPointMake((pointX+lastPointX)/2, pointY) controlPoint2:CGPointMake((pointX+lastPointX)/2, lastPointY)];
                }else{
                    //直线连接
                    [line addLineToPoint:CGPointMake(xPosition+singleSpace+titleWidth+singleW/2-(singleW+singleSpace), viewHeight-titleWidth-lastSingleHeight)];
                }
                
            }
            lineLayer.path = line.CGPath;
            //线条宽度
            lineLayer.lineWidth = self.lineWidth>0?self.lineWidth:2;
            if (!self.lineColor) {
                self.lineColor = [UIColor redColor];
            }
            //线条颜色
            lineLayer.strokeColor = self.lineColor.CGColor;
            lineLayer.fillColor = [UIColor clearColor].CGColor;
            [lineArray addObject:lineLayer];
            
        }
        
        columnLayer.path = column.CGPath;
        if (!self.columnColor) {
            self.columnColor = [UIColor orangeColor];
        }
        
        columnLayer.fillColor = CGColorCreateCopyWithAlpha(self.columnColor.CGColor, 1.0);
        columnLayer.strokeStart = 0;
        columnLayer.strokeEnd = 1.0;
        [columnShapeLayerArray addObject:columnLayer];
        
        [self.layer addSublayer:columnLayer];
        
        for (CAShapeLayer *lineLayer in lineArray) {
            [self.layer addSublayer:lineLayer];
        }
        
        xPosition += (singleW+singleSpace);
        
    }
}
#pragma  mark  添加 点视图
- (void)loadPointInChartView
{
    if (isChange) {
        [self deleteColumnLayer];
    }
    
    UIBezierPath *circle = [UIBezierPath bezierPath];
    
    CGFloat viewHeight = self.bounds.size.height;
    
    //如果之前 添加了 则把之前的删了
    if (pointShapeLayerArray.count > 0) {
        for (CAShapeLayer *layer in pointShapeLayerArray) {
            [layer removeFromSuperlayer];
        }
    }
    
    //把之前添加的线条删除了
    if (lineArray.count > 0) {
        for (CAShapeLayer *lineLayer in lineArray) {
            [lineLayer removeFromSuperlayer];
        }
    }
    
    pointShapeLayerArray = [NSMutableArray array];
    lineArray = [NSMutableArray array];
    
    if (!topPointYArray) {
        topPointYArray = [NSMutableArray array];
    }else{
        [topPointYArray removeAllObjects];
    }
    //顶部中点连线
    NSInteger count = topCenterPointXArray.count;
    if (count >0) {
        
        for (int i = 0; i<topCenterPointXArray.count; i++) {
            
            CAShapeLayer *circleLayer = [CAShapeLayer layer];
            
            NSString *topPoint = topCenterPointXArray[i];
            CGFloat pointX = [topPoint floatValue];
            //y值
            CGFloat yValues = [self.yValueArray[i] floatValue];
            //y坐标又是不一样了 y值越大，柱子越高，坐标其实是越小
            CGFloat pointY = (1-(yValues/yMax))*(viewHeight-yArrowHeight-titleWidth)+yArrowHeight;
            
            [topPointYArray addObject:[NSString stringWithFormat:@"%f",pointY]];
            
            [circle moveToPoint:CGPointMake(pointX, pointY)];
            
            CGFloat radius = self.pointWidth >0 ?self.pointWidth:5.0;
            //标示点 为圆
            [circle  addArcWithCenter:CGPointMake(pointX, pointY) radius:radius startAngle:0 endAngle:M_PI*2 clockwise:YES];
            circleLayer.path = circle.CGPath;
            if (!self.pointColor) {
                self.pointColor = [UIColor orangeColor];
            }
            //圆点的填充色
            circleLayer.fillColor = CGColorCreateCopyWithAlpha(self.pointColor.CGColor, 1.0);
            circleLayer.strokeStart = 0;
            circleLayer.strokeEnd = 1.0;
            circleLayer.lineWidth = 1;
            [pointShapeLayerArray addObject:circleLayer];
            
            if (self.showLine) {
                
                UIBezierPath *line = [UIBezierPath bezierPath];
                
                CAShapeLayer *lineLayer = [CAShapeLayer layer];
                
                if (i>0) {
                    NSString *lastXValue = topCenterPointXArray[i-1];
                    CGFloat lastPointX = [lastXValue floatValue];
                    
                    NSString *lastValue = _yValueArray[i-1];
                    CGFloat lastYValue = [lastValue floatValue];
                    //y坐标又是不一样了 y值越大，柱子越高，坐标其实是越小
                    CGFloat lastPointY = (1-(lastYValue/yMax))*(viewHeight-yArrowHeight-titleWidth)+yArrowHeight;
                    
                    //移到中点
                    [line moveToPoint:CGPointMake(pointX,pointY)];
                    
                    if (self.lineIsCurve) {
                        //曲线连接 两个控制点 x为两个点的中间点 y为首末点的y坐标 为了实现平滑连接
                        [line addCurveToPoint:CGPointMake(lastPointX, lastPointY) controlPoint1:CGPointMake((pointX+lastPointX)/2, pointY) controlPoint2:CGPointMake((pointX+lastPointX)/2, lastPointY)];
                    }else{
                        //向上一个点 添加连线
                        [line addLineToPoint:CGPointMake(lastPointX,lastPointY)];
                    }
                    
                }
                lineLayer.path = line.CGPath;
                lineLayer.lineWidth = self.lineWidth>0?self.lineWidth:2;
                if (!self.lineColor) {
                    self.lineColor = [UIColor blackColor];
                }
                lineLayer.strokeColor = self.lineColor.CGColor;
                lineLayer.fillColor = [UIColor clearColor].CGColor;
                [lineArray addObject:lineLayer];
                
            }
            
        }
    }
    
    for (CAShapeLayer *layer  in pointShapeLayerArray) {
        [self.layer addSublayer:layer];
    }
    
    for (CAShapeLayer *lineLayer in lineArray) {
        [self.layer addSublayer:lineLayer];
    }
    
}

总计八百多行，我就不一一贴出了。上述两个方法是核心的方法：

添加柱状图时，要注意坐标系的转换，因为我们布局的时候，坐标原点为视图的左上角，我们需要展示的柱状图的原点则是视图的左下角。

我们先获取到每一个y的值，然后计算出了每一个值占最大值的比率，然后用这个比率乘以y轴的总高度，则为对应的柱状图高度。

我们获取到每一个x值之后，要进行计算，比较用户设置的柱子的宽度＊柱子的个数 与 初始设定的视图的宽度的大小，如果前者较大，则需要微调，以展示全部的柱子，后者较大，则不做处理。

对于线条的处理，直线图无需多余的处理，对于曲线图，使用的是有两个控制点的贝塞尔曲线，这两个控制点：
点A的x为始末点的中点的x，A的y为起点的y值。B的x为始末点的中点的x，y为末点的y值。这样就可以实现曲线平滑连接始末点了。

接下来看一下该怎么使用：

- (void)loadChartView
{
    chartView = [[WQLChartView alloc]initWithFrame:CGRectMake(10, 100,chartWidth, chartHeight)];
    chartView.singleRowWidth = 50;//可注释掉
    chartView.columnColor = [UIColor lightGrayColor];//可注释掉
    chartView.pointColor = [UIColor orangeColor];//可注释掉
    chartView.xAxleTitle = @"日";//可注释掉
    chartView.yAxleTitle = @"件";//可注释掉
    chartView.type = ChartViewTypeColumn;//可注释掉
    chartView.showLine = YES;//可注释掉
    chartView.lineColor = [UIColor blueColor];//可注释掉
    chartView.lineIsCurve = YES;//可注释掉
    chartView.colorOfNumber = [UIColor redColor];//可注释掉
    chartView.yPointArray = @[@"20",@"40",@"60",@"80",@"100"];//可注释掉
    chartView.xValueArray = xValuesArray;
    chartView.yValueArray = yValuesArray;
    [chartView showChartInView:self.view];

}

最简单的就是全部非必要属性使用默认的，仅需4行即可加载柱状图。

回到要点上，功能才是王道：

添加柱子：

切换类型：

由头文件的属性可知，以下属性都可以修改：

图表的类型：分为柱状的和点状的
单列的宽度：柱状图时有效，默认25
每个柱子之间的间距：柱状图时有效
x的值数组：必须赋值的属性，为X轴上的点
y的值数组：必须赋值的属性，为对应的x的y值
x轴的右侧标题：可设置属性，为x轴的单位
y轴的顶部标题：可设置属性，为y轴的单位
y轴上的点的个数：可设置属性，默认为5个点，即y轴被分为5等份
y轴的坐标点数组：y轴上的刻度点
柱子的颜色：可设置属性，默认为橘黄色
是否显示线条：可设置属性，默认不显示线条
连线的颜色：可设置属性，默认为红色
连线的宽度：可设置属性，默认为2
点的颜色：点状图时有效，默认橙色
点的宽度：点状图时有效，标示的点的半径
是否使用平滑的曲线：连线的形状，默认使用直线连接
是否隐藏数值：不显示数字，默认为NO，不隐藏
数值的颜色：显示的数值的文本颜色，默认为黑色
数值的字号：数值的文本字号，默认为14号

需要额外提一点的是：用户的柱子宽度一定，当数量比较多时，原来的给定的尺寸不足以显示的时候，我将柱子的宽度缩小了以实现刚好填充的效果。

如有不足之处还请各位园友指导～一起学习一起进步！

完整的代码在这里：                 ChartView 1