IOS用Tableview实现自定义柱形图(可左右滑动)

要用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    




好了  这里就制作完毕了

下面给出剩余核心代码


感谢大家  有意见随时提,不吝赐教【抱拳】


附上代码下载地址:

GitHub - jiangxiaobin1011/ChartView: 利用双tableview制作自定义柱形图

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容