下載Highcharts最新試用版

以下文章總結了如何在Swift中使用Highcharts iOS庫。

我們將對2016/2017賽季四支頂級冠軍聯(lián)賽球隊的統(tǒng)計數(shù)據(jù)進行可視化。

A.如何創(chuàng)建Highcharts項目

入門

在Xcode中創(chuàng)建一個新項目，然后選擇iOS \ Application \ Single View App模板。

為項目命名。選擇Swift for Language。保留使用核心數(shù)據(jù)，包括單元測試，未選中包含UI測試并完成項目創(chuàng)建。

從這里下載Highcharts框架：Highcharts 或使用的CocoaPods通過添加pod 'Highcharts', '~> 6.1.0'到您的Podfile或迦太基通過添加github "//github.com/highcharts/highcharts-ios" >= 6.1.0到您的Cartfile。

現(xiàn)在，只需將Highcharts復制到您的項目中，只需將其復制到項目框架（如有必要，創(chuàng)建），并記住選中“ 如果需要復制項目 ”選項。

點擊完成

然后轉(zhuǎn)到項目設置并將Highcharts添加到嵌入式二進制文件。

您現(xiàn)在設置為使用Highcharts！

設置AppDelegate

在你的AppDelegate.swift導入頂部的Highchartsimport Highcharts

將此行添加到didFinishLaunchingWithOptions中 HIChartView.preload()

將HIChartView添加到View Controller

在首次導入Highcharts的ViewController.swift文件中，添加名為chartView的屬性import Highcharts var chartView: HIChartView!

B.創(chuàng)建圖表以使用Highcharts可視化團隊統(tǒng)計數(shù)據(jù)

我們將創(chuàng)建一個基本的柱形圖，以顯示2016/17歐洲冠軍聯(lián)賽前4名球隊的一些統(tǒng)計數(shù)據(jù)。

在viewDidLoad中添加以下行self.chartView = HIChartView(frame: self.view.bounds)

這將創(chuàng)建我們的chartView，其中包含您的視圖指定的已定義邊界。 現(xiàn)在讓我們考慮一下圖表選項。該HIOptions類是負責。這個包含了呈現(xiàn)所需的所有信息。

創(chuàng)建HIOptions類的實例 let options = HIOptions()

此類的Object將用于設置圖表所需的所有選項。值得注意的是，創(chuàng)建圖表只需要其中一些（例如系列 - 將在本文后面討論）。讓我們從配置圖表變量開始。為此，我們需要HIChart類：

let chart = HIChart() chart = HIChart()
chart.type = "column".type = "column"
options.chart = chart.chart = chart

在第二行中，在上面的代碼中，我們type從HIChart類中選擇了變量的圖表類型。HIChart類提供了更多，但在我們的示例中，這個單獨的變量就足夠了。在最后一行中，我們在選項中添加了圖表。最好一次將所有內(nèi)容添加到選項對象中，以避免遺漏其中的一些內(nèi)容。

在這一刻，值得給我們的圖表一個正確的名稱：

let title = HITitle() title = HITitle()
title.text = "UEFA Champions League 2016/17".text = "UEFA Champions League 2016/17"

let subtitle = HISubtitle()let subtitle = HISubtitle()
subtitle.text = "Team statistics".text = "Team statistics"
options.title = title.title = title
options.subtitle = subtitle.subtitle = subtitle

由HITubtle管理的圖表標題，而HISubtitle負責字幕。在最后兩行中，我們再次向選項添加了設置對象。

如果需要更改默認軸名稱，則需要自己執(zhí)行以下操作：

let xAxis = HIXAxis() xAxis = HIXAxis()
xAxis.categories = [.categories = [
  "Goals","Goals",
  "Assists","Assists",
  "Shots On Goal","Shots On Goal",
  "Shots""Shots"
]]
options.xAxis = [xAxis].xAxis = [xAxis]

let yAxis = HIYAxis()let yAxis = HIYAxis()
yAxis.min = 0.min = 0
yAxis.title = HITitle().title = HITitle()
yAxis.title.text = "Number".title.text = "Number"
options.yAxis = [yAxis].yAxis = [yAxis]

正如可以看到，可變categories的HIXAxis類是“字符串”元件的陣列。因此，您需要使用正確的名稱初始化數(shù)組。最后，像往常一樣，將其添加到選項類中。接下來，我們定義了Y軸。變量min確定軸刻度的開始。您可能會注意到字段標題類型是HITitle類，它用于修改Y軸標題。圖表可能根據(jù)需要具有多個X軸和Y軸，這就是為什么它也作為數(shù)組添加到選項中的原因。

現(xiàn)在，我們將討論工具提示的問題。請考慮以下代碼：

let tooltip = HITooltip() tooltip = HITooltip()
tooltip.headerFormat = "<span style="0font-size: 15px\";">{point.key}</span>.headerFormat = "<span style="0font-size: 15px\";">{point.key}</span>

" tooltip.pointFormat = "" + "" tooltip.pointFormat = "" + ""
tooltip.footerFormat = ".footerFormat = "
<table>
<tbody>
<tr>
<td style="0color: {series.color}; padding: 0\";">{series.name}:</td>0color: {series.color}; padding: 0\";">{series.name}:</td>
<td style="0padding: 0\";"><b>{point.y}</b></td>0padding: 0\";"><b>{point.y}</b></td>
</tr>
</tbody>
</table>
"
tooltip.shared = true.shared = true
tooltip.useHTML = true.useHTML = true
options.tooltip = tooltip.tooltip = tooltip

要管理工具提示，您需要創(chuàng)建HITooltip類。工具提示是一個小部件，當您點擊特定圖表數(shù)據(jù)時會顯示該部件。這里有一些變量可以讓您格式化工具提示。所有格式化程序都在文檔中有詳細說明。在本文中，值得注意的是，您必須打開useHTML標志才能讓您的圖表使用HTML格式。然而，share flag讓您顯示一個工具提示，無論您從同一類別中點擊哪個系列。

此時，我們可以添加一些特定于圖表類型的選項：

let plotOptions = HIPlotOptions() plotOptions = HIPlotOptions()
plotOptions.column = HIColumn().column = HIColumn()
plotOptions.column.pointPadding = 0.2.column.pointPadding = 0.2
plotOptions.column.borderWidth = 0.column.borderWidth = 0
options.plotOptions = plotOptions.plotOptions = plotOptions

options.plotOptions = plotOptions.plotOptions = plotOptions

在上面的代碼中，我們添加了新的HIPlotOptions類對象。我們只使用列字段，因為這是我們圖表的確切類型 - 這就是我們HIPlotOptionsColumn為其分配類實例的原因。poinPadding是每列之間的填充，borderWidth是每列周圍邊框的寬度。

目前，我們只討論柱形圖中的選項。

let realMadrid = HIColumn() realMadrid = HIColumn()
realMadrid.name = "Real Madrid".name = "Real Madrid"
realMadrid.data = [36, 31, 93, 236].data = [36, 31, 93, 236]

let juventus = HIColumn()let juventus = HIColumn()
juventus.name = "Juventus".name = "Juventus"
juventus.data = [22, 10, 66, 178].data = [22, 10, 66, 178]

let monaco = HIColumn()let monaco = HIColumn()
monaco.name = "Monaco".name = "Monaco"
monaco.data = [22, 17, 56, 147].data = [22, 17, 56, 147]

let atleticoMadrid = HIColumn()let atleticoMadrid = HIColumn()
atleticoMadrid.name = "Atlético Madrid".name = "Atlético Madrid"
atleticoMadrid.data = [15, 9, 55, 160].data = [15, 9, 55, 160]

options.series = [realMadrid, juventus, monaco, atleticoMadrid].series = [realMadrid, juventus, monaco, atleticoMadrid]

在上面的代碼中，有四列。每個都包含來自不同俱樂部的數(shù)據(jù)。我們來談談第一個（其余的以相同的方式完成）。首先，我們創(chuàng)建了HIColumn負責列實現(xiàn)的對象。接下來，我們?yōu)槠涮砑恿艘粋€名稱，并使用要呈現(xiàn)的數(shù)據(jù)初始化數(shù)據(jù)的數(shù)組。此時，您可能很奇怪為什么我們沒有將任何列添加到選項中。答案很簡單。需要先將列添加到系列中！

Series是一個包含HISeries對象的特殊數(shù)組。每個圖表類型對象都擴展了HISeries類，因此我們可以毫不費力地將所有列添加到數(shù)組中，如最后一行所示。

現(xiàn)在，當一切都完成后，我們可以完成我們的工作：

self.chartView.options = options
self.view.addSubview(self.chartView)

我們已將所有選項添加到開頭創(chuàng)建的HIGChartView中。最后要做的是將chartView添加到視圖層次結構中。而已！我們創(chuàng)建了圖表。結果應如下所示：