下载Highcharts最新试用版

以下文章总结了如何在Swift中使用Highcharts iOS库。

我们将对2016/2017赛季四支顶级冠军联赛球队的统计数据进行可视化。

A.如何创建Highcharts项目

入门

在Xcode中创建一个新项目，然后选择iOS \ Application \ Single View App模板。

为项目命名。选择Swift for Language。保留使用核心数据，包括单元测试，未选中包含UI测试并完成项目创建。

从这里下载Highcharts框架：Highcharts 或使用的CocoaPods通过添加pod 'Highcharts', '~> 6.1.0'到您的Podfile或迦太基通过添加github "https://github.com/highcharts/highcharts-ios" >= 6.1.0到您的Cartfile。

现在，只需将Highcharts复制到您的项目中，只需将其复制到项目框架（如有必要，创建），并记住选中“ 如果需要复制项目 ”选项。

点击完成

然后转到项目设置并将Highcharts添加到嵌入式二进制文件。

您现在设置为使用Highcharts！

设置AppDelegate

在你的AppDelegate.swift导入顶部的Highchartsimport Highcharts

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

将HIChartView添加到View Controller

在首次导入Highcharts的ViewController.swift文件中，添加名为chartView的属性import Highcharts var chartView: HIChartView!

B.创建图表以使用Highcharts可视化团队统计数据

我们将创建一个基本的柱形图，以显示2016/17欧洲冠军联赛前4名球队的一些统计数据。

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

这将创建我们的chartView，其中包含您的视图指定的已定义边界。 现在让我们考虑一下图表选项。该HIOptions类是负责。这个包含了呈现所需的所有信息。

创建HIOptions类的实例 let options = HIOptions()

此类的Object将用于设置图表所需的所有选项。值得注意的是，创建图表只需要其中一些（例如系列 - 将在本文后面讨论）。让我们从配置图表变量开始。为此，我们需要HIChart类：

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

在第二行中，在上面的代码中，我们type从HIChart类中选择了变量的图表类型。HIChart类提供了更多，但在我们的示例中，这个单独的变量就足够了。在最后一行中，我们在选项中添加了图表。最好一次将所有内容添加到选项对象中，以避免遗漏其中的一些内容。

在这一刻，值得给我们的图表一个正确的名称：

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负责字幕。在最后两行中，我们再次向选项添加了设置对象。

如果需要更改默认轴名称，则需要自己执行以下操作：

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类是“字符串”元件的阵列。因此，您需要使用正确的名称初始化数组。最后，像往常一样，将其添加到选项类中。接下来，我们定义了Y轴。变量min确定轴刻度的开始。您可能会注意到字段标题类型是HITitle类，它用于修改Y轴标题。图表可能根据需要具有多个X轴和Y轴，这就是为什么它也作为数组添加到选项中的原因。

现在，我们将讨论工具提示的问题。请考虑以下代码：

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

要管理工具提示，您需要创建HITooltip类。工具提示是一个小部件，当您点击特定图表数据时会显示该部件。这里有一些变量可以让您格式化工具提示。所有格式化程序都在文档中有详细说明。在本文中，值得注意的是，您必须打开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]

在上面的代码中，有四列。每个都包含来自不同俱乐部的数据。我们来谈谈第一个（其余的以相同的方式完成）。首先，我们创建了HIColumn负责列实现的对象。接下来，我们为其添加了一个名称，并使用要呈现的数据初始化数据的数组。此时，您可能很奇怪为什么我们没有将任何列添加到选项中。答案很简单。需要先将列添加到系列中！

Series是一个包含HISeries对象的特殊数组。每个图表类型对象都扩展了HISeries类，因此我们可以毫不费力地将所有列添加到数组中，如最后一行所示。

现在，当一切都完成后，我们可以完成我们的工作：

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

我们已将所有选项添加到开头创建的HIGChartView中。最后要做的是将chartView添加到视图层次结构中。而已！我们创建了图表。结果应如下所示：