让我们来做一些图表:iOS图表

我最近开始尝试使用iOS Charts API,并且很喜欢它。 有很多有趣的选项可用于检出图形,您可以真正自定义图形以使其完全符合所需的外观。

简单安装CocoaPods

  1. 假设您是从头开始一个新项目,请创建一个新项目并在终端中打开它
  2. 键入“ pod init ”,然后键入“ open”。
  3. 打开podfile。 我喜欢在Atom中执行此操作,但是如果您没有Atom,则可以在终端中编写“ open podfile ”,然后将打开一个文本编辑器
  4. 在“ use_frameworks!”注释下写荚“ Charts / Realm”

5.从Swift 3.0的实现开始,以下代码必须粘贴在podfile的底部(在上面的第一个“结束”之下)

6.在终端“ pod install ”上运行

7. pod安装完成后,将创建以.xcworkspace结尾的项目版本。 这是包含您刚刚安装的Pod的版本。 从现在开始,您将始终在此文件中工作。 继续并从终端打开它

8.构建项目以确保一切都顺利安装。

…,让我们开始建立一些图表!

ChartViewController

在深入研究特定图表的代码之前,我想在这里粘贴ChartViewController代码。 我决定将图表类型分为特定的视图,而不是在ChartViewController中编写图表的所有代码。

如果您要遵循自己的代码,我想强调两个项目:

  1. 为了填充图表视图,我使用了协议-委托关系,一旦设置了委托,该协议就会填充图表数据。
  2. 为了自定义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中创建漂亮的图表