Highcharts iOS 是 HighchartsJS 用于 iOS 的优美包装。
最受欢迎、最健壮且经过实战检验的 JavaScript 图表库现在可以通过我们新的 Objective-C 包装在 iOS 上。以最少的努力获得精美、多触控图表。
文档
在此处访问完整的 API 文档。
如何操作
在此处，我们展示了如何创建基本图表并将其放置在项目中。
我们需要做什么
- 为 Highcharts 准备您的项目
- 创建图表视图并将其放置在您的视图中
- 创建图表选项并将其添加到您的图表视图中
- 运行应用程序并享受吧!
准备您的项目
-
首先，从这里下载 Highcharts xcframework： Highcharts 或者通过 Cocoapods，在您的 Podfile 中添加
pod 'Highcharts', '~> 11.1.0'或者通过 Swift Package Manager，添加包依赖
https://github.com/highcharts/highcharts-ios或者通过 Carthage，在 Cartfile 中添加
github "https://github.com/highcharts/highcharts-ios" >= 11.1.0 -
现在，将 Highcharts 添加到您的项目中，简单地将它复制到项目文件夹 Frameworks（如果需要，请创建它）中，并记得勾选 "根据需要复制项" 选项
- 点击 完成
- 然后进入您的项目设置，将 Highcharts 添加到 框架、库和嵌入式内容 中，并选择 "嵌入并签名" 选项
- 如果您的项目使用 Xcode UI 测试，请确保将 Highcharts 框架添加到嵌入式二进制文件的 UITests 目标以及主项目目标
您现在已准备好使用 Highcharts！
使用 Highcharts (UIKit 示例应用)
设置 AppDelegate
在您的 AppDelegate.swift 文件中，在顶部导入 Highcharts
import Highcharts将此行添加到您的 application:didFinishLaunchingWithOptions 方法中
HIChartView.preload()将 HIChartView 添加到您的视图控制器
在您的 View Controller.swift 文件中添加
import Highcharts和
var chartView: HIChartView!创建图表
让我们从创建简单的图表开始吧！
在本教程中，我们将使用随机数据创建一个简单的柱状图。
在 viewDidLoad 方法中添加以下行
chartView = HIChartView(frame: CGRect(x: view.bounds.origin.x, y: view.bounds.origin.y + 20, width: view.bounds.size.width, height: 300))这将创建具有定义起始点和尺寸的图表视图。
完成了！现在让我们创建一个图表。
图表的核心是 HIOptions 类，其中包含展示图表所需的所有信息。其中一些选项是可选的，一些是必需的（请参阅由 Highcharts 提供的演示应用 HighFit）。
创建 HIOptions 类的实例
let options = HIOptions()现在我们需要添加图表展示所需的选项。让我们从 图表类型 开始。为了这样做，创建 HIChart 类对象并将其类型设置为 "column"。
let chart = HIChart()
chart.type = "column"将此对象添加到 options 中
options.chart = chart然后为我们的图表设置一个名称（标题），并将其添加到 options 中
let title = HITitle()
title.text = "Demo chart"
options.title = title现在我们需要添加一些数据（在本教程中将是随机的一系列数字）。因为我们正在创建一个 柱状图，我们需要使用 HIColumn 数据序列
let series = HIColumn()要添加数据，只需创建包含我们的数据对象的数组
series.data = [49.9, 71.5, 106.4, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]由于选项可以存储多个序列，我们需要将序列添加为一个单元素数组
options.series = [series]最后，将我们的 options 添加到图表视图中
chartView.options = options不要忘记将图表视图添加为子视图到你的视图控制器视图的视图控制器子视图！最后添加
view.addSubview(chartView)就这样！我们现在可以运行我们的应用程序了！您的 View Controller.swift 文件应该看起来像这样
import Highcharts
import UIKit
class ViewController: UIViewController {
var chartView: HIChartView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
chartView = HIChartView(frame: CGRect(x: view.bounds.origin.x,
y: view.bounds.origin.y + 20,
width: view.bounds.size.width,
height: 300))
let options = HIOptions()
let chart = HIChart()
chart.type = "column"
options.chart = chart
let title = HITitle()
title.text = "Demo chart"
options.title = title
let series = HIColumn()
series.data = [49.9, 71.5, 106.4, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
options.series = [series]
chartView.options = options
view.addSubview(chartView)
}
}使用 Highcharts (SwiftUI 演示应用)
设置预加载
在您的 App.swift 中，顶部导入 Highcharts
import Highcharts将以下行添加到您的 init() 或 application:didFinishLaunchingWithOptions 方法中
HIChartView.preload()为 HIChartView 创建一个简单的 SwiftUI 包装器
需要几个步骤
- 创建一个符合
UIViewRepresentable的结构体； - 定义一个属性来存储图表的
HIOptions配置； - 实现
makeUIView()以创建我们的图表视图； - 实现
updateUIView()以更新我们的图表视图
在您的代码中，它可能看起来像这样
struct ChartView: UIViewRepresentable {
var options: HIOptions
func makeUIView(context: Context) -> HIChartView {
let chart = HIChartView()
chart.options = options
return chart
}
func updateUIView(_ uiView: HIChartView, context: Context) {
uiView.options = options
}
}这就完成了！现在我们可以在 SwiftUI 中使用 ChartView 组件了
import Highcharts
import SwiftUI
struct ContentView: View {
private var chartOptions: HIOptions {
let options = HIOptions()
let chart = HIChart()
chart.type = "column"
options.chart = chart
let title = HITitle()
title.text = "Demo chart in SwiftUI"
options.title = title
let series = HIColumn()
series.data = [49.9, 71.5, 106.4, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
options.series = [series]
return options
}
var body: some View {
ChartView(options: chartOptions)
}
}完整的 SwiftUI 示例项目可以在下面找到：[HCSwiftUIDemo](https://github.com/highcharts/highcharts-ios/tree/master/Example/HCSwiftUIDemo)。
在 XCode 中按下 "Run"。
对于更复杂的解决方案，请查看 Highcharts 提供的示例应用 HighFit，或阅读以下 文档！
更多信息
附加模块
如果启用附加模块，请在分配图表选项之前将其添加到 HIChartView 对象的 plugins 中，例如：
chartView.plugins = ["annotations"]
...
chartView.options = optionsHIColor 示例
Highcharts iOS 组件提供自己的颜色实现。如您所注意到的，一些选项是 HIColor 类型。您可以通过几种方式实例化所需的颜色，这些方式在 API 文档 中描述。在此，我们将展示最复杂的情况，即渐变的使用。例如，您可以为图表背景实例化一个颜色：
chart.backgroundColor = HIColor(linearGradient: ["x1": 0, "x2": 0, "y1": 0, "y2": 300],
stops: [
[0, "rgb(102, 153, 161)"],
[1, "rgb(128, 135, 232)"]
])HIFunction 示例
多亏了 Highcharts iOS 组件，您现在可以将原生 iOS 闭包分配给特定图表元素的特定事件。我们将向您展示这样的使用方法。为此，我们将显示一个简单的警报，其中包含点坐标，在点击时出现，但请注意，您可以使用 HIFunction 机制实现更多功能！
首先，您需要为您的系列类型创建一个 plotOptions 对象
let plotOptions = HIPlotOptions()
plotOptions.series = HISeries()现在，您可以引用点事件并添加如下的点击功能
plotOptions.series.point = HIPoint()
plotOptions.series.point.events = HIEvents()
let clickFunction = HIFunction(closure: { [weak self] context in
guard let self = self, let context = context else { return }
let category = context.getProperty("this.category") ?? "",
value = context.getProperty("this.y") ?? ""
let alertMessage = "Category: \(category), value: \(value)"
let alertController = UIAlertController(title: nil,
message: alertMessage,
preferredStyle: .alert)
let okAction = UIAlertAction(title: "OK", style: .default, handler: nil)
alertController.addAction(okAction)
self.present(alertController, animated: true, completion: nil)
}, properties: ["this.category", "this.y"])
plotOptions.series.point.events.click = clickFunction
options.plotOptions = plotOptions如您在上面的代码片段中所见，HIFunction 的第一个参数是实际的闭包。第二个参数是简单的图表元素字符串数组。我们需要将它们放在这里，以便包装器在 HIFunction 实例化过程中为我们获取它们。多亏了这一点，我们可以通过 getProperty: 方法引用这些元素的相关值。您可以通过这种方式提取任何图表数据。根据当前需求，您可以直接运行代码、从图表提取数据、将字符串返回给图表（例如在 HITooltip 格式化器中）或以字符串格式在构造函数中放入纯 JavaScript 函数。有关更多信息，请随时查看 API 文档。
自定义字体
Highcharts iOS 封装器允许您添加自定义字体。如果您有自己的字体并想在图表中应用它，请按照以下步骤操作
- 将字体文件添加到您的项目中。从菜单栏选择 文件 -> 将文件添加到“您的项目名称”，或者将文件拖放到您的 Xcode 项目中，检查 如有必要，复制项目 选项并将字体添加到您的应用程序目标中。
- 将您的字体添加到
HIChartView。为此，首先，您需要获取指向字体位置的绝对路径，然后调用addFont:方法
let fontPath = Bundle.main.path(forResource: "Windsong", ofType: "ttf")
HIChartView.addFont(fontPath)因此，现在您可以在图表中使用自定义字体。例如，让我们更改图表标题字体。您只需要创建一个标题的样式对象，并将其字体家族设置为字体文件名
title.style = HICSSObject()
title.style.fontFamily = "Windsong"