通过图形和图表呈现数据是当今移动应用程序最显着的特征之一。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 ChartDataEntry
var dataEntries: [ChartDataEntry] = []
for i in 0..
// 2\. Set ChartDataSet
let pieChartDataSet = PieChartDataSet(values: dataEntries, label: nil)
pieChartDataSet.colors = colorsOfCharts(numbersOfColor: dataPoints.count)
// 3\. Set ChartData
let pieChartData = PieChartData(dataSet: pieChartDataSet)
let format = NumberFormatter()
format.numberStyle = .none
let formatter = DefaultValueFormatter(formatter: format)
pieChartData.setValueFormatter(formatter)
// 4\. Assign it to the chart’s data
pieChartView.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..
现在,让我们看看我们的图表有多漂亮。
3.其他图表
正如我们在开始时所说,每个图表都有自己的优势。折线图和条形图可能不符合当前应用程序的要求。但是,我们仍然会创建这两个iOS图表,向您展示可以使用相同的简单步骤轻松创建它们。
a. Swift折线图
```
var dataEntries: [ChartDataEntry] = []
for i in 0.. 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 var dataEntries: [BarChartDataEntry] = [] for i in 0.. 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
![image](https://upload-images.jianshu.io/upload_images/7887714-0555b35d48fde61c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
b. 条形图
![image](https://upload-images.jianshu.io/upload_images/7887714-7f973b5a03c86132.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
**4.结论和iOS图表挑战**
毕竟,我们希望本文提供**iOS ****图表**的清晰概述 。它们使您的移动应用程序更加美观和有吸引力 除核心功能外,还应优先考虑应用程序UI / UX ,以提供更好的用户体验。
在我们完成本文之前,我们面临一些挑战:
这个库也有一些**触摸事件**,所以你可以尝试这个部分。
对于BarChartView,在*viewDidLoad()中*,我们留下了一些代码行作为奖励。你可以玩它们。
[这](https://github.com/DuyBui297/ChartsTutorial/tree/completed-project)是完成的Swift源代码。希望您学会了如何在Swift中构建iOS图表,这样您就可以使您的Xcode项目更具吸引力。我们希望您发现这个Swift教程很有用,所以请分享它以传播这个词。不要忘记做你的挑战。快乐的编码!