让我们来做一些图表:iOS图表
我最近开始尝试使用iOS Charts API,并且很喜欢它。 有很多有趣的选项可用于检出图形,您可以真正自定义图形以使其完全符合所需的外观。
简单安装CocoaPods
- 假设您是从头开始一个新项目,请创建一个新项目并在终端中打开它
- 键入“ pod init ”,然后键入“ open”。 ”
- 打开podfile。 我喜欢在Atom中执行此操作,但是如果您没有Atom,则可以在终端中编写“ open podfile ”,然后将打开一个文本编辑器
- 在“ use_frameworks!”注释下写荚“ Charts / Realm”
5.从Swift 3.0的实现开始,以下代码必须粘贴在podfile的底部(在上面的第一个“结束”之下)
6.在终端“ pod install ”上运行
7. pod安装完成后,将创建以.xcworkspace结尾的项目版本。 这是包含您刚刚安装的Pod的版本。 从现在开始,您将始终在此文件中工作。 继续并从终端打开它
8.构建项目以确保一切都顺利安装。
…,让我们开始建立一些图表!
ChartViewController
在深入研究特定图表的代码之前,我想在这里粘贴ChartViewController代码。 我决定将图表类型分为特定的视图,而不是在ChartViewController中编写图表的所有代码。
如果您要遵循自己的代码,我想强调两个项目:
- 为了填充图表视图,我使用了协议-委托关系,一旦设置了委托,该协议就会填充图表数据。
- 为了自定义x轴文本,我创建了一个公共类ChartFormatter,该类适用于本演示中显示的所有图表。 如果您不包括此类,则X轴文本将在图形的顶部,并且您将无法自定义字体等。
条形图。
将“图表”导入正在使用的快捷文件中。
创建BarChartView实例后,我以编程方式将图表限制在barChartSetup()中的视图边缘。 您可能会注意到barChartSetup()中还包含一个动画。 尽管我选择了.easeInBounce,但仍有多种选择可以使用; .easeInBounce刚好吸引了我。 🙂如果要签出其他选项,请删除.easeInBounce并仅输入“。”,所有其他选项将在下面填充。
最终产品:
折线图。
毫不奇怪,折线图的制作方法类似于条形图。 首先,创建LineChartView的实例,并将其约束到视图的边缘。 与条形图一样,折线图也可以设置为动画。
为了使折线图更加生动有趣,我决定添加一个渐变功能。 我还决定将每个数据点的值包括在图形的点顶部(.setDrawValues(true)而不是.setDrawValues(false))。
最终产品:
立方图。
甚至让人惊讶的是,立方图的代码与折线图的代码基本相同。 一个不同? 在setCubicLineChart函数中,您可能会注意到一行代码:“ chartDataSet.mode = .cubicBezier。”在下一行中,您要弯曲的线的数量是自定义的:“ chartDataSet.cubicIntensity = 0.2”。 就这么简单!!
如果要进一步自定义数据点上方的值的文本,请参考setCubicLineChart函数“ chartDataSet.valueFont = UIFont(name:“ DESIRED FONT NAME”,大小:“ DESIRED FONT SIZE”)中的代码。
最终产品:
非常感谢Daniel Cohen Gindi制作了这个出色的API。 我希望每个人都喜欢和我一起玩它!
参考文献:
丹尼尔金迪/图
图表– iOS / tvOS / OSX的精美图表! 跨平台MPAndroidChart的Apple端。 github.com
如何使用iOS Charts API在Swift中创建漂亮的图表