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

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

31. 这样您就完成了柱形图表的制作，最后点击此处的[停止]按钮，关闭模拟器，并结束本节课程。

image

image

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

apps8 2.png