如何在Swift中创建漂亮的iOS图表

通过图形和图表呈现数据是当今移动应用程序最显着的特征之一。iOS图表使应用程序看起来更漂亮，更有吸引力。

在本教程中，我们将向您展示如何使用代码示例在Swift中实现我们的iOS图表。我们将看一下Swift折线图，饼图以及条形图。

您可以找到许多支持显示图表的库，其中一个是Daniel Cohen Gindi的图表。在本文中，我们将研究如何显示图表，有多少类型的图表以及如何自定义它们。

1.简介

目前，它已成为大多数健身应用程序或任何提供用户数据跟踪，检查和比较的企业应用程序的最突出功能之一。在表格或集体视图中显示数据可能很无聊，并提供有限的数据可视化功能。从那时起，在这些情况下，应该在iOS应用程序中集成图表。

根据我们的目的，我们选择哪种类型的Swift图表最适合我们的iOS功能：

条形图：当数据具有不同的类别并且需要比较时（例如，每月销售值），条形图提供了良好且直观的可视化。
饼图：当分类数据需要以百分比显示时，饼图（也称为圆图）将是一个不错的选择。每个图表总是代表整体，因此必须等于100％。
折线图：为了直观地表示某段时间内的变化，例如库存，没有比使用折线图更好的了。它显示最大和最小点，并显示公司的当前状态。

2. Swift中的iOS饼图

在本教程中，我们将构建一个iOS应用程序，显示玩家为其足球俱乐部贡献的目标百分比。正如您可能已经猜到的那样，在iOS本机应用程序中，Swift饼图将是可视化此类数据的最佳方式。

让我们开始吧。在这里下载Swift入门项目并在Xcode中运行它。基本上，它有三个按钮对应于三种类型的图表中的每一种。当您点击任何按钮时，它会按下显示所需图表的屏幕。

像往常一样，我们需要安装依赖库，在本例中是Charts。您可以手动或通过Podfile（推荐 - 这是我们使用的）或Carthage下载它。我们更喜欢Podfile，因为它快速，整洁，干净。我们还已经创建了Podfile（带有pod图表），所以你只需要在终端中运行` pod install`命令。然后，让我们第一次运行Xcode项目。它看起来像这样：

快速图表

第1步：设置UI和IBOutlets

通过使用Interface Builder，将View对象拖到故事板中。请记住使用自动布局为其设置约束。然后，在Identity检查器部分，从Charts模块中选择PieChartView。

之后，我们需要将IBOutlet连接从屏幕上的View拖动到管理PieChartView的UIViewController。请记住导入Charts库以便成功编译代码。

第2步：创建模拟数据

接下来，我们将创建一个名为“ CommonData ” 的文件，其中包含玩家的名字以及他们各自的俱乐部目标数量。

let players = [“Ozil”, “Ramsey”, “Laca”, “Auba”, “Xhaka”, “Torreira”]
let goals = [6, 8, 26, 30, 8, 10]

然后，我们将创建一个显示所有这些数据的函数，并将其放在viewDidLoad（）中，如下所示：

override func viewDidLoad() {
super.viewDidLoad()
customizeChart(dataPoints: players, values: goals.map{ Double($0) })
}
func customizeChart(dataPoints: [String], values: [Double]) {
// TO-DO: customize the chart here
}

这功能是customizeChart与数据点和值的参数。因为“values”参数是Double，所以我们需要将目标数组从Int类型更改为Double类型。现在我们需要做的是根据需要自定义图表。

第3步：自定义图表

在向您展示代码之前，我们想谈谈理论。您应该知道以下某些属性：

ChartDataEntry：此“ChartDataEntry”属性将存储我们需要在数组中表示的每个元素的值。
ChartDataSet：此ChartDataSet将使用ChartDataEntry对象数组中的信息来自定义如何在屏幕上显示它们。
ChartData：此ChartData将使用ChartDataSet作为图表的数据。

现在让我们看看它是如何工作的

func customizeChart(dataPoints: [String], values: [Double]) {// 1. Set ChartDataEntryvar dataEntries: [ChartDataEntry] = []for i in 0..<dataPoints.count {let dataEntry = PieChartDataEntry(value: values[i], label: dataPoints[i], data: dataPoints[i] as AnyObject)dataEntries.append(dataEntry)}// 2. Set ChartDataSetlet pieChartDataSet = PieChartDataSet(values: dataEntries, label: nil)pieChartDataSet.colors = colorsOfCharts(numbersOfColor: dataPoints.count)// 3. Set ChartDatalet pieChartData = PieChartData(dataSet: pieChartDataSet)let format = NumberFormatter()format.numberStyle = .nonelet formatter = DefaultValueFormatter(formatter: format)pieChartData.setValueFormatter(formatter)// 4. Assign it to the chart’s datapieChartView.data = pieChartData
}

我们来分析代码：

对于每个玩家和他拥有的目标，我们将其设置为PieChartDataEntry对象 - ChartDataEntry的子类。然后我们将它保存在PieChartDataEntry类型的数组中。
PieChartDataSet（ChartDataSet的子类）将使用此数组来自定义如何在屏幕上显示它们。例如，这行代码pieChartDataSet.colors将为每个部分设置颜色。
PieChartData-- ChartData的子类将存储PieChartDataSet。此时，您可以更改将在屏幕上显示的值的格式，例如15而不是15.0。
在完成所有设置之后，我们将pieChartData分配给pieChartView.data

此外，如果您具有每种特定颜色的设计并且您知道确切的条目数，则可以为它们创建和选择颜色。在这个应用程序中，我们将为它选择随机颜色，颜色数量取决于项目的数量。

private func colorsOfCharts(numbersOfColor: Int) -> [UIColor] {var colors: [UIColor] = []for _ in 0..<numbersOfColor {let red = Double(arc4random_uniform(256))let green = Double(arc4random_uniform(256))let blue = Double(arc4random_uniform(256))let color = UIColor(red: CGFloat(red/255), green: CGFloat(green/255), blue: CGFloat(blue/255), alpha: 1)colors.append(color)}return colors
}

现在，让我们看看我们的图表有多漂亮。

快速的饼图

3.其他图表

正如我们在开始时所说，每个图表都有自己的优势。折线图和条形图可能不符合当前应用程序的要求。但是，我们仍然会创建这两个iOS图表，向您展示可以使用相同的简单步骤轻松创建它们。

a. Swift折线图

var dataEntries: [ChartDataEntry] = []
for i in 0..<dataPoints.count {let dataEntry = ChartDataEntry(x: values[i], y: Double(i))dataEntries.append(dataEntry)
}
let lineChartDataSet = LineChartDataSet(values: dataEntries, label: nil)
let lineChartData = LineChartData(dataSet: lineChartDataSet)
lineChartView.data = lineChartData

swift line chart

b. 条形图

var dataEntries: [BarChartDataEntry] = []
for i in 0..<dataPoints.count {let dataEntry = BarChartDataEntry(x: Double(i), y: Double(values[i]))dataEntries.append(dataEntry)
}
let chartDataSet = BarChartDataSet(values: dataEntries, label: “Bar Chart View”)
let chartData = BarChartData(dataSet: chartDataSet)
barChartView.data = chartData

swift bar chart