如何在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 ChartDataEntry
  var 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 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..<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

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

4.結論和iOS圖表挑戰

畢竟，我們希望本文提供iOS 圖表的清晰概述。它們使您的移動應用程式更加美觀和有吸引力除核心功能外，還應優先考慮應用程式UI / UX ，以提供更好的使用者體驗。

在我們完成本文之前，我們面臨一些挑戰：

這個庫也有一些觸摸事件，是以你可以嘗試這個部分。
對于BarChartView，在viewDidLoad（）中，我們留下了一些代碼行作為獎勵。你可以玩它們。

這是完成的Swift源代碼。希望您學會了如何在Swift中建構iOS圖表，這樣您就可以使您的Xcode項目更具吸引力。我們希望您發現這個Swift教程很有用，是以請分享它以傳播這個詞。不要忘記做你的挑戰。快樂的編碼！