3.5 创建一个带有标题/图例/坐标轴的柱形图表 [iOS开发中的神兵利器]


1. 本节课将为您演示，如何创建一个漂亮的柱形图表。首先确保在您的项目中，已经安装了所需的第三方库。双击此处查看安装配置文件。


2. 根据配置文件中的相关设置，安装第三方库。安装完成之后，双击打开此处的项目文件。


3. 为了更好的显示柱形图标，需要调整模拟器的朝向。


4. 取消勾选肖像复选框，使模拟器保持横向显示。


5. 然后在左侧的项目导航区，打开视图控制器的代码文件。


6. 现在开始编写代码，制作一款柱形图表。


7. 首先在当前的类文件中，引入已经安装的第三方类库。


8. 接着创建一个包含6个数字的数组，作为第一组柱形的数据。


9. 创建第二个数组，作为另一组柱形的数据。


10. 创建第三个数组，作为第三组柱形的数据， 我们的柱形图中，将用来展示三组数据的趋势。


11. 依次创建三个图表数据记录。


12. 接着通过一个循环，将第一个数组中的数字，添加到图表数据记录中。


13. 使用相同的方式，将第二个数组中的数字，添加到图表数据记录中。


14. 最后将第三个数组中的数字，添加到图表数据记录中。


15. 创建一个数据集，并设置数据集的值域和标签文字，同时设置该数据集对应柱形的填充颜色。


16. 创建第二个数据集，并设置数据集的值域和标签文字，同时设置该数据集对应柱形的填充颜色。


17. 使用相同的方式，创建第三个数据集。


18. 初始化一个柱形图表数据对象，设置对象的数据集属性。


19. 接着设置柱形的宽度为0.25。


20. 创建一个指定显示区域的柱形图表视图。


21. 设置柱形图表视图的背景颜色为无色。


22. 设置左右两侧的坐标轴的最小值都是0。


23. 将柱形图表数据对象，设置为柱形图表视图的数据属性。


24. 强制将各子元素进行组合，忽略它们在屏幕上的位置。


25. 设置图表在水平方向上可被拖动的距离。


26. 接着设置图表允许被缩放。


27. 在水平轴范围的两侧各添加柱形一半的宽度，使所有的柱形可以被全部显示出来。


28. 接着将柱形数据集组合起来，并设置柱形组的水平轴的起点位置为-1，组间距为0.2，柱形间距为0.05。


29. 将配置好的图表，添加到根视图中，然后点击左上角的[编译并运行]按钮，启动模拟器预览项目。


30. 在弹出的模拟器中，显示了一张具有三个分组的柱形图表，点击一个柱形，柱形将被选择并改变填充颜色。




本文整理自：《app开发中的神兵利器》，真正的[手把手]教学模式，用最快的速度上手iOS开发，苹果商店App Store免费下载：https://itunes.apple.com/cn/app/id1209739676，或扫描本页底部的二维码。课程配套素材下载地址：资料下载

0