我们将对2016/2017赛季四支顶级冠军联赛球队的统计数据进行可视化。
下载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()
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 = titleoptions.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 = 0yAxis.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 = truetooltip.useHTML = true.useHTML = trueoptions.tooltip = tooltip.tooltip = tooltip
此时，我们可以添加一些特定于图表类型的选项：
let plotOptions = HIPlotOptions() plotOptions = HIPlotOptions()plotOptions.column = HIColumn().column = HIColumn()plotOptions.column.pointPadding = 0.2.column.pointPadding = 0.2plotOptions.column.borderWidth = 0.column.borderWidth = 0options.plotOptions = plotOptions.plotOptions = plotOptionsoptions.plotOptions = plotOptions.plotOptions = plotOptions
在上面的代码中，我们添加了新的HIPlotOptions类对象。我们只使用列字段，因为这是我们图表的确切类型 – 这就是我们HIPlotOptionsColumn为其分配类实例的原因。poinPadding是每列之间的填充，borderWidth是每列周围边框的宽度。
目前，我们只讨论柱形图中的选项。
let realMadrid = HIColumn() realMadrid = HIColumn()realMadrid.name = ""Real Madrid"".name = ""Real Madrid""realMadrid.data = [36
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！