3.13 使用ScrollableGraphView创建美观简洁

1. 本节课将为您演示，另一款强大的图表类库。首先确保在您的项目中，已经安装了所需的第三方库。在此处双击查看安装配置文件。

image

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

image

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

image

4. 现在开始编写代码，创建一份折线图表。

image

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

image

6. 添加一个方法，用来完成图表的创建。

image

7. 初始化一个矩形区域对象。

image

8. 然后创建一个指定显示区域的可滚动图形视图。

image

9. 接着创建一个数组，作为图表的数据源。

image

10. 创建另一个数组，作为图表的水平轴向的标签。

image

11. 然后设置可滚动图形视图的数据源和标题。

image

12. 最后将可滚动图形视图，添加到根视图。

image

13. 在视图加载完成的方法中，添加绘制图表的方法。接着点击左上角的[编译并运行]按钮，启动模拟器预览项目。

image

14. 在弹出的模拟器中，绘制了一个简单的折线图表。点击此处的[停止]按钮，关闭模拟器，并结束本节课程。

image

15. 接着创建另一个方法，用来创建一个暗调、平滑、可滚动的面积图。

image

16. 初始化一个矩形区域对象。

image

17. 然后创建一个指定显示区域的可滚动图形视图。

image

18. 设置图形视图的背景填充颜色。

image

19. 设置图形视图的最大值为100，超过此值的数据将显示在图形之外。

image

20. 接着设置线条的宽度为1。

image

21. 设置线条的颜色。

image

22. 然后设置线段的外观为平滑样式，这线绘制的线条为贝塞尔曲线。

image

23. 设置图形视图支持填充模式，以绘制面积图。

image

24. 设置面积图的填充方式为渐变填充。

image

25. 接着设置面积图的填充的颜色。

image

26. 设置渐变填充的类型为线形渐变，除此之外还有径向渐变样式。

image

27. 然后设置渐变填充的起始颜色。

image

28. 设置渐变填充的结束颜色。

image

29. 设置数据点之间的间距为80，接着设置数据点的大小为2，设置图形视图的数据点的颜色为白色。

image

30. 接着设置参考线上的标签字体，为加粗的8号字体。

image

31. 设置参考线的颜色为白色，颜色的透明度为0.2。

image

32. 设置参考线上的标签字体的颜色为白色。

image

33. 然后设置数据点的标签字体的颜色为白色，颜色的透明度为0.5。

image

34. 初始化两个数组，分别作为图表的数据和水平轴向的标题。

image

35. 设置图形视图的数据源和数据标签。

image

36. 设置根视图的背景颜色，并将图形视图添加到根视图。接着点击垂直滚动条，切换至编辑器的顶部区域。

image

37. 将此处的方法的名称，修改为新方法的名称。

image

38. 接着点击左上角的[编译并运行]按钮，启动模拟器预览项目。

image

39. 在模拟器中显示了一个平滑曲线的面积图，由于图表的宽度太长，以致于当前只显示了部分内容。在右侧按下手指，并向左侧拖动，观察隐藏的内容。

image

40. 然后点击此处的[停止]按钮，关闭模拟器。
[图片上传失败...(image-d885a3-1523452685376)]

41. 点击右侧的垂直滚动条，接着您将创建一个暗调的柱形图表。

image

42. 首先添加一个新的方法。

image

43. 在该方法中创建一个柱形图表。

image

44. 初始化一个矩形区域对象。

image

45. 然后创建一个指定显示区域的可滚动图形视图。

image

46. 设置图形视图允许绘制数据点。

image

47. 设置图形视图的线条颜色为无色。

image

48. 接着设置图形视图绘制柱形图层。

image

49. 然后设置柱形的宽度为25，柱形线条的宽度为1。

image

50. 设置图形线条的颜色。

image

51. 设置图形自身的填充颜色。

image

52. 接着设置图形视图的背景填充颜色。

image

53. 依次设置图形视图的参考线的标签字体、线条颜色和字体颜色。

image

54. 设置数据点标签颜色为白色，并设置透明度为0.5。

image

55. 设置中间参考线的数量为5，默认值为3。

image

56. 接着设置图形视图，以动画的方式显示。

image

57. 设置垂直轴向的数据范围为自适应，以能够全部显示所有的数据。

image

58. 设置图形视图的动画类型为弹性样式。

image

59. 设置动画的时长为1.5秒。

image

60. 设置垂直轴向显示范围的最大值为100，超出范围之外的数据将显示在图形之外。

image

61. 设置图形视图的显示范围，其最小值始终保持为0。

image

62. 然后设置可滚动图形视图的数据源和标题。

image

63. 设置图形视图的数据源和标题信息，接着设置根视图的背景颜色。

image

64. 最后将图形视图添加到根视图，并跳转到编辑器的顶部。

image

65. 将此处的方法的名称，修改为新建方法的名称。

image

66. 接着点击左上角的[编译并运行]按钮，启动模拟器预览项目。

image

67. 在弹出的模拟器中，显示了暗调主题的柱形图。点击此处的[停止]按钮，关闭模拟器。

image

68. 点击右侧的垂直滚动条，接着您将创建一个蓝色的散点图表。

image

69. 首先添加一个新的方法。

image

70. 在该方法中创建一个散点图表。

image

71. 初始化一个矩形区域对象。

image

72. 然后创建一个指定显示区域的可滚动图形视图。

image

73. 设置图形视图的背景填充颜色，和线条颜色。

image

74. 设置图形视图的数据点的尺寸，以及数据点之间的距离。

image

75. 接着设置数据点的标签字体、标签颜色和填充颜色。

image

76. 依次设置图形视图的参考线的标签字体、线条颜色和标签文字的颜色。

image

77. 设置在图形视图中，参考线位于左右两侧。参考线的位置共有左、右、两侧三种格式。

image

78. 接着设置中间参考线的数量为9，默认的值为3。

image

79. 设置垂直轴向显示范围的最大值为100，超出范围之外的数据将显示在图形之外。

image

80. 初始化两个数组，分别作为图表的数据和水平轴向的标题。

image

81. 设置图形视图的数据源和标题信息。

image

82. 设置根视图的背景颜色，并将图形视图添加到根视图。接着点击垂直滚动条，切换至编辑器的顶部区域。

image

83. 将此处的方法的名称，修改为新建方法的名称。

image

84. 接着点击左上角的[编译并运行]按钮，启动模拟器预览项目。

image

85. 在弹出的模拟器中，显示了一个蓝色的散点图表。最后点击此处的[停止]按钮，关闭模拟器，并结束本节课程。

image

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

apps8 2.png