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

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

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

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

image

1.简介

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

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

条形图:当数据具有不同的类别并且需要比较时(例如,每月销售值),条形图提供了良好且直观的可视化。

饼图:当分类数据需要以百分比显示时,饼图(也称为圆图)将是一个不错的选择。每个图表总是代表整体,因此必须等于100%。

折线图:为了直观地表示某段时间内的变化,例如库存,没有比使用折线图更好的了。它显示最大和最小点,并显示公司的当前状态。

2. Swift中的iOS饼图

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

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

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

image

第1步:设置UI和IBOutlets

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

之后,我们需要将IBOutlet连接从屏幕上的View拖动到管理PieChartViewUIViewController。请记住导入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..

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

image

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


![image](https://upload-images.jianshu.io/upload_images/7887714-0555b35d48fde61c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

b. 条形图

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-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教程很有用,所以请分享它以传播这个词。不要忘记做你的挑战。快乐的编码!

你可能感兴趣的:(如何在Swift中创建漂亮的iOS图表)