最近因项目需求，要使用柱状图，第三方的东西固然很好，但是我还是想要写一个自己的柱状图，因为更加符合我们项目的需求，日后维护起来也会方便许多。
写了一个自定义视图，可以自定义众多属性，关键是使用起来方便，最少四行就可以了。
废话不多说，上代码：
WQLChartView.h文件：
1 typedef NS_ENUM(NSInteger ,ChartViewType) {
2 ChartViewTypeColumn,
3 ChartViewTypePoint
4 };
5
6 @interface WQLChartView : UIView
7 /**
8 * 图表的类型
9 */
10 @property (nonatomic,assign) ChartViewType type;
11 /**
12 * 单列的宽度
13 */
14 @property (nonatomic,assign) CGFloat singleRowWidth;
15 /**
16 * 每个柱子之间的间距
17 */
18 @property (nonatomic,assign) CGFloat singleChartSpace;
19 /**
20 * x的值 数组
21 */
22 @property (nonatomic,strong) NSArray *xValueArray;
23 /**
24 * y的值 数组
25 */
26 @property (nonatomic,strong) NSArray *yValueArray;
27 /**
28 * x轴的右侧标题（比如：时间）
29 */
30 @property (nonatomic,copy) NSString *xAxleTitle;
31 /**
32 * y轴的顶部标题 （比如：万件）
33 */
34 @property (nonatomic,copy) NSString *yAxleTitle;
35 /**
36 * y轴上有几个点
37 */
38 @property (nonatomic,assign) NSInteger yAxlePointNumber;
39 /**
40 * y轴的坐标点 数组
41 */
42 @property (nonatomic,strong) NSArray *yPointArray;
43 /**
44 * 柱子的颜色
45 */
46 @property (nonatomic,strong) UIColor *columnColor;
47 /**
48 * 是否显示线条
49 */
50 @property (nonatomic,assign) BOOL showLine;
51 /**
52 * 连线的颜色
53 */
54 @property (nonatomic,strong) UIColor *lineColor;
55 /**
56 * 连线的宽度（粗细）
57 */
58 @property (nonatomic,assign) CGFloat lineWidth;
59 /**
60 * 点的颜色（只有是point类型才有效）
61 */
62 @property (nonatomic,strong) UIColor *pointColor;
63 /**
64 * 点的宽度（只有point类型才有效）
65 */
66 @property (nonatomic,assign) CGFloat pointWidth;
67 /**
68 * 连接是否使用平滑的曲线
69 */
70 @property (nonatomic,assign) BOOL lineIsCurve;
71 /**
72 * 是否隐藏数值 默认不隐藏
73 */
74 @property (nonatomic,assign) BOOL isHideNumber;
75 /**
76 * 数值的颜色
77 */
78 @property (nonatomic,strong) UIColor *colorOfNumber;
79 /**
80 * 数值的字号
81 */
82 @property (nonatomic,assign) NSInteger fontSizeOfNumber;
83
84 //在superView上展示视图 必须调用 参数配置完毕后调用
85 - (void)showChartInView:(UIView*)superView;
86
87 //更新视图
88 - (void)updateView;
WQLChartView.m文件 核心代码：
1 #pragma mark 添加柱状图
2 - (void)loadColumnShapeWithSingleWidth:(CGFloat)singleW withSpace:(CGFloat)singleSpace
3 {
4
5 CGFloat viewHeight = self.bounds.size.height;
6 //如果改动了 则把之前的显示部分移除掉
7 if (isChange) {
8 [self deletePointLayer];
9 }
10
11 //如果之前 添加了 则把之前的删了
12 if (columnShapeLayerArray.count > 0) {
13 for (CAShapeLayer *layer in columnShapeLayerArray) {
14 [layer removeFromSuperlayer];
15 }
16 }
17
18 //把之前添加的线 移除掉
19 if (lineArray.count > 0) {
20 for (CAShapeLayer *lineLayer in lineArray) {
21 [lineLayer removeFromSuperlayer];
22 }
23 }
24
25 columnShapeLayerArray = [NSMutableArray array];
26 lineArray = [NSMutableArray array];
27
28 UIBezierPath *column = [UIBezierPath bezierPath];
29
30 CGFloat xPosition = 0;
31 if (!topPointYArray) {
32 topPointYArray = [NSMutableArray array];
33 }else{
34 [topPointYArray removeAllObjects];
35 }
36
37 for (int i = 0; i<xCount; i++) {
38 CAShapeLayer *columnLayer = [CAShapeLayer layer];
39 //当前的y值
40 NSString *value = _yValueArray[i];
41 CGFloat yValue = [value floatValue];
42 //y值 占坐标最大值的比率
43 CGFloat rate = yValue/yMax;
44 //单个柱子的高度
45 CGFloat singleHeight = (viewHeight-titleWidth-yArrowHeight)*rate;
46
47 NSString *topPointY = [NSString stringWithFormat:@"%f",viewHeight-titleWidth-singleHeight];
48 [topPointYArray addObject:topPointY];
49
50 //x轴 为柱子左下侧的点 y为坐标轴
51 [column moveToPoint:CGPointMake(xPosition+singleSpace+titleWidth, viewHeight-titleWidth)];
52 //柱子的左侧垂直线
53 [column addLineToPoint:CGPointMake(xPosition+singleSpace+titleWidth, viewHeight-titleWidth-singleHeight)];
54 //柱子的顶部水平线
55 [column addLineToPoint:CGPointMake(xPosition+singleSpace+titleWidth+singleW, viewHeight-titleWidth-singleHeight)];
56 //柱子的右侧垂直线
57 [column addLineToPoint:CGPointMake(xPosition+singleSpace+titleWidth+singleW, viewHeight-titleWidth)];
58
59 if (self.showLine) {
60
61 UIBezierPath *line = [UIBezierPath bezierPath];
62
63 CAShapeLayer *lineLayer = [CAShapeLayer layer];
64
65 if (i>0) {
66 //上一个点的y值
67 NSString *lastValue = _yValueArray[i-1];
68 CGFloat lastYValue = [lastValue floatValue];
69 CGFloat lastRate = lastYValue/yMax;
70 //取到上一个点的高度
71 CGFloat lastSingleHeight = (viewHeight-titleWidth-yArrowHeight)*lastRate;
72
73 //移到柱子的顶部中点
74 [line moveToPoint:CGPointMake(xPosition+singleSpace+titleWidth+singleW/2, viewHeight-titleWidth-singleHeight)];
75 //向上一个点 添加连线
76 if (self.lineIsCurve) {
77 //曲线连接
78 //上一个点的x坐标
79 CGFloat lastPointX = xPosition+singleSpace+titleWidth+singleW/2-(singleW+singleSpace);
80 //上一个点的y坐标
81 CGFloat lastPointY = viewHeight - titleWidth-lastSingleHeight;
82 //该柱子顶部中点的x坐标
83 CGFloat pointX = xPosition+singleSpace+titleWidth+singleW/2;
84 //该柱子顶部中点的y坐标
85 CGFloat pointY = viewHeight-titleWidth-singleHeight;
86 //添加曲线 两个控制点 x为两个点的中间点 y为首末点的y坐标 为了实现平滑连接
87 [line addCurveToPoint:CGPointMake(lastPointX, lastPointY) controlPoint1:CGPointMake((pointX+lastPointX)/2, pointY) controlPoint2:CGPointMake((pointX+lastPointX)/2, lastPointY)];
88 }else{
89 //直线连接
90 [line addLineToPoint:CGPointMake(xPosition+singleSpace+titleWidth+singleW/2-(singleW+singleSpace), viewHeight-titleWidth-lastSingleHeight)];
91 }
92
93 }
94 lineLayer.path = line.CGPath;
95 //线条宽度
96 lineLayer.lineWidth = self.lineWidth>0?self.lineWidth:2;
97 if (!self.lineColor) {
98 self.lineColor = [UIColor redColor];
99 }
100 //线条颜色
101 lineLayer.strokeColor = self.lineColor.CGColor;
102 lineLayer.fillColor = [UIColor clearColor].CGColor;
103 [lineArray addObject:lineLayer];
104
105 }
106
107 columnLayer.path = column.CGPath;
108 if (!self.columnColor) {
109 self.columnColor = [UIColor orangeColor];
110 }
111
112 columnLayer.fillColor = CGColorCreateCopyWithAlpha(self.columnColor.CGColor, 1.0);
113 columnLayer.strokeStart = 0;
114 columnLayer.strokeEnd = 1.0;
115 [columnShapeLayerArray addObject:columnLayer];
116
117 [self.layer addSublayer:columnLayer];
118
119 for (CAShapeLayer *lineLayer in lineArray) {
120 [self.layer addSublayer:lineLayer];
121 }
122
123 xPosition += (singleW+singleSpace);
124
125 }
126 }
127 #pragma mark 添加 点视图
128 - (void)loadPointInChartView
129 {
130 if (isChange) {
131 [self deleteColumnLayer];
132 }
133
134 UIBezierPath *circle = [UIBezierPath bezierPath];
135
136 CGFloat viewHeight = self.bounds.size.height;
137
138 //如果之前 添加了 则把之前的删了
139 if (pointShapeLayerArray.count > 0) {
140 for (CAShapeLayer *layer in pointShapeLayerArray) {
141 [layer removeFromSuperlayer];
142 }
143 }
144
145 //把之前添加的线条删除了
146 if (lineArray.count > 0) {
147 for (CAShapeLayer *lineLayer in lineArray) {
148 [lineLayer removeFromSuperlayer];
149 }
150 }
151
152 pointShapeLayerArray = [NSMutableArray array];
153 lineArray = [NSMutableArray array];
154
155 if (!topPointYArray) {
156 topPointYArray = [NSMutableArray array];
157 }else{
158 [topPointYArray removeAllObjects];
159 }
160 //顶部中点连线
161 NSInteger count = topCenterPointXArray.count;
162 if (count >0) {
163
164 for (int i = 0; i<topCenterPointXArray.count; i++) {
165
166 CAShapeLayer *circleLayer = [CAShapeLayer layer];
167
168 NSString *topPoint = topCenterPointXArray[i];
169 CGFloat pointX = [topPoint floatValue];
170 //y值
171 CGFloat yValues = [self.yValueArray[i] floatValue];
172 //y坐标又是不一样了 y值越大，柱子越高，坐标其实是越小
173 CGFloat pointY = (1-(yValues/yMax))*(viewHeight-yArrowHeight-titleWidth)+yArrowHeight;
174
175 [topPointYArray addObject:[NSString stringWithFormat:@"%f",pointY]];
176
177 [circle moveToPoint:CGPointMake(pointX, pointY)];
178
179 CGFloat radius = self.pointWidth >0 ?self.pointWidth:5.0;
180 //标示点 为圆
181 [circle addArcWithCenter:CGPointMake(pointX, pointY) radius:radius startAngle:0 endAngle:M_PI*2 clockwise:YES];
182 circleLayer.path = circle.CGPath;
183 if (!self.pointColor) {
184 self.pointColor = [UIColor orangeColor];
185 }
186 //圆点的填充色
187 circleLayer.fillColor = CGColorCreateCopyWithAlpha(self.pointColor.CGColor, 1.0);
188 circleLayer.strokeStart = 0;
189 circleLayer.strokeEnd = 1.0;
190 circleLayer.lineWidth = 1;
191 [pointShapeLayerArray addObject:circleLayer];
192
193 if (self.showLine) {
194
195 UIBezierPath *line = [UIBezierPath bezierPath];
196
197 CAShapeLayer *lineLayer = [CAShapeLayer layer];
198
199 if (i>0) {
200 NSString *lastXValue = topCenterPointXArray[i-1];
201 CGFloat lastPointX = [lastXValue floatValue];
202
203 NSString *lastValue = _yValueArray[i-1];
204 CGFloat lastYValue = [lastValue floatValue];
205 //y坐标又是不一样了 y值越大，柱子越高，坐标其实是越小
206 CGFloat lastPointY = (1-(lastYValue/yMax))*(viewHeight-yArrowHeight-titleWidth)+yArrowHeight;
207
208 //移到中点
209 [line moveToPoint:CGPointMake(pointX,pointY)];
210
211 if (self.lineIsCurve) {
212 //曲线连接 两个控制点 x为两个点的中间点 y为首末点的y坐标 为了实现平滑连接
213 [line addCurveToPoint:CGPointMake(lastPointX, lastPointY) controlPoint1:CGPointMake((pointX+lastPointX)/2, pointY) controlPoint2:CGPointMake((pointX+lastPointX)/2, lastPointY)];
214 }else{
215 //向上一个点 添加连线
216 [line addLineToPoint:CGPointMake(lastPointX,lastPointY)];
217 }
218
219 }
220 lineLayer.path = line.CGPath;
221 lineLayer.lineWidth = self.lineWidth>0?self.lineWidth:2;
222 if (!self.lineColor) {
223 self.lineColor = [UIColor blackColor];
224 }
225 lineLayer.strokeColor = self.lineColor.CGColor;
226 lineLayer.fillColor = [UIColor clearColor].CGColor;
227 [lineArray addObject:lineLayer];
228
229 }
230
231 }
232 }
233
234 for (CAShapeLayer *layer in pointShapeLayerArray) {
235 [self.layer addSublayer:layer];
236 }
237
238 for (CAShapeLayer *lineLayer in lineArray) {
239 [self.layer addSublayer:lineLayer];
240 }
241
242 }
总计八百多行，我就不一一贴出了。上述两个方法是核心的添加方法。
接下来看一下该怎么使用：
1 - (void)loadChartView
2 {
3 chartView = [[WQLChartView alloc]initWithFrame:CGRectMake(10, 100,chartWidth, chartHeight)];
4 chartView.singleRowWidth = 50;//可注释掉
5 chartView.columnColor = [UIColor lightGrayColor];//可注释掉
6 chartView.pointColor = [UIColor orangeColor];//可注释掉
7 chartView.xAxleTitle = @"日";//可注释掉
8 chartView.yAxleTitle = @"件";//可注释掉
9 chartView.type = ChartViewTypeColumn;//可注释掉
10 chartView.showLine = YES;//可注释掉
11 chartView.lineColor = [UIColor blueColor];//可注释掉
12 chartView.lineIsCurve = YES;//可注释掉
13 chartView.colorOfNumber = [UIColor redColor];//可注释掉
14 chartView.yPointArray = @[@"20",@"40",@"60",@"80",@"100"];//可注释掉
15 chartView.xValueArray = xValuesArray;
16 chartView.yValueArray = yValuesArray;
17 [chartView showChartInView:self.view];
18
19 }
最简单的就是全部非必要属性使用默认的，仅需4行即可加载柱状图。
回到要点上，功能才是王道：
添加柱子：
切换类型：
由头文件的属性可知，以下属性都可以修改：
图表的类型：分为柱状的和点状的
单列的宽度：柱状图时有效，默认25
每个柱子之间的间距：柱状图时有效
x的值数组：必须赋值的属性，为X轴上的点
y的值数组：必须赋值的属性，为对应的x的y值
x轴的右侧标题：可设置属性，为x轴的单位
y轴的顶部标题：可设置属性，为y轴的单位
y轴上的点的个数：可设置属性，默认为5个点，即y轴被分为5等份
y轴的坐标点数组：y轴上的刻度点
柱子的颜色：可设置属性，默认为橘黄色
是否显示线条：可设置属性，默认不显示线条
连线的颜色：可设置属性，默认为红色
连线的宽度：可设置属性，默认为2
点的颜色：点状图时有效，默认橙色
点的宽度：点状图时有效，标示的点的半径
是否使用平滑的曲线：连线的形状，默认使用直线连接
是否隐藏数值：不显示数字，默认为NO，不隐藏
数值的颜色：显示的数值的文本颜色，默认为黑色
数值的字号：数值的文本字号，默认为14号
需要额外提一点的是：用户的柱子宽度一定，当数量比较多时，原来的给定的尺寸不足以显示的时候，我将柱子的宽度缩小了以实现刚好填充的效果。
如有不足之处还请各位园友指导～一起学习一起进步！
完整的代码在这里：ChartView 1
时间： 2024-10-18 18:08:49