要用Tableview实现左右滑动的柱形图 其实并不难
首先咱们上下效果图:
这里是一些自定义参数:
我们分成几个步骤来实现
1.布局
2.绘制x和y轴的线
3.绘制y轴上的标签
4.绘制各个柱状图
5.绘制x轴的标签
具体步骤
1.布局
留出边框为了能更好的拓展 不要问为什么 毕竟可以留条活路 万一还要加些其他什么东西呢😂
下面看下布局:
首先分割成两个tableview,上面的用来滑动显示柱状,下面的为了显示x轴的标签。
为什么分用俩个,自己悟吧.............
其实大家会有疑问为什么tableview可以横向滑动,这里作者采用特殊的方法,其实tableview并不能自带的横向滑动属性,这里作者采用的是创建竖向的tableview,然后选择90度来展现的 所以你们最开始看到的是这样的 ,
同理下面的X轴标签也可以通过同样的方法
上代码
2.绘制x和y轴的线
采用画布的方式 上代码 不解释了 基本的方法
上面的【self RGBDic:.....】方法是获取颜色值的RGB值
3.绘制y轴上的标签
这里创建的是y轴等份的label,效果图
4.绘制各个柱状图
自定义cell
其实我们所创建的横向的cell 我们不妨旋转过来看 这样更好理解
上代码
这里给cell设置了progress值用来绘制柱形图的高度 value用来显示柱形图上面的label文字
5.绘制x轴的标签
这里也是cell
好了 这里就制作完毕了
下面给出剩余核心代码
感谢大家 有意见随时提,不吝赐教【抱拳】
附上代码下载地址: