Highcharts iOS

优质

小牛编辑

129浏览

2023-12-01

Highcharts iOS 是官方发布的 iOS 扩展包，可以很方便的在 iOS 开发过程中使用 Highcharts 创建多点触控的交互性图表。

API 文档

地址：API 文档

开始

接下来，以一个示例项目的创建简单介绍一下 Highcharts iOS 的基本使用方法。

步骤

创建 iOS 项目
使用 Highcharts
在 view 中创建图表 view
创建图表配置并添加到图表 view 中
运行并查看效果

1. 创建项目

下载 Highcharts 框架

首先从这里下载 Highcharts 框架：Highcharts

或通过使用 Cocoapods 添加到您的配置文件中

pod 'Highcharts', '~> 7.1.4'

或通过使用 Carthage 添加到您的配置文件中

github "https://github.com/highcharts/highcharts-ios" >= 7.1.4

请注意： 这是一个包含 intel 架构的开发框架。为了向苹果应用商店提交项目，您需要使用 lipo 删除这些体系结构，手动或使用 CocoaPods 添加 “release” 文件夹中的版本。

将 Highcharts 添加到您的项目中

只需要将其复制到您项目中的文件夹框架（如果有必要，请创建它）并且记得勾选 “Copy items if needed” 选项

点击完成

添加到嵌入式二进制文件

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

Xcode UI 测试

如果您的项目利用了 Xcode UI 测试，请确保将 Highcharts 框架添加到 UITests 目标路径及主项目路径下的嵌入式二进制文件中。

到这里，您就将 Highcharts 设置到您的项目中，并且可以开始使用了。

请注意：手动链接时，“release” 目录中的二进制框架目的在允许上传到 AppStore。因此，它不允许在 iOS 模拟器上运行。要运行模拟器，请下载 GitHub 仓库中的项目文件并使用框架（框架可以在 “development” 目录中找到）。Cocoapods 可以自动解决这个问题——他们为 AppStore 的上传引入了一个修剪过的脚本

2. 开始使用

设置 AppDelegate

在您的 AppDelegate.m 文件中，在顶部导入 Highcharts

#import <Highcharts/Highcharts.h>

然后将下列代码添加到您的应用程序：didFinishLaunchingWithOptions

[HIChartView preload];

3. 将 HIChartView 添加到 View Controller

在 View Controller .m 文件中添加

#import <Highcharts/Highcharts.h>

然后把

@interface ViewController ()
@end

修改为

@interface ViewController ()
@property (strong, nonatomic) HIChartView *chartView;
@end

4. 创建图表

接下来，开始创建一个简单的图表。

处于本教程的目的，我们将使用随机数据创建一个简单的柱状图图。

在 viewDidLoad 中添加以下代码：

self.chartView = [[HIChartView alloc] initWithFrame:CGRectMake(self.view.bounds.origin.x, self.view.bounds.origin.y + 20, self.view.bounds.size.width, 300.0f)];

这将创建一个已定义原点和大小的图表视图

5. 创建图表配置并添加到图表中

图表的核心是 HIOptions 类，它包含了呈现图表信息所需的所有信息。有些选项是可选的，有些则不是（可以参考 HighCharts 提供的演示 Demo HighFit

创建 HIOptions 类的实例

HIOptions *options = [[HIOptions alloc]init];

现在，我们需要添加一些呈现图表信息所需的选项。让我们从设置图表类型开始。为此，请先创建 HIChart 类对象并将其类型设置为 “column”

HIChart *chart = [[HIChart alloc]init];
chart.type = @"column";

并将此对象添加到您的选项配置中

options.chart = chart;

然后我们给图表命名，也添加到选项配置中

HITitle *title = [[HITitle alloc]init];
title.text = @"Demo chart";

options.title = title;

现在，我们需要添加一些数据（在本教程中，它将是一些随机的数字集合）。因为我们正在创建一个柱状图图，所以我们需要使用 HIColumn 数据系列。

HIColumn *series = [[HIColumn alloc]init];

要添加数据，只需创建数据对象的数组

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

self.chartView.options = options;

注意：不要忘记将 chartView 作为子视图添加到 View Controller 的视图中。在末尾添加

[self.view addSubview:self.chartView];

到此我们已经完成了所有步骤，现在 View Controller .m 的代码如下：

#import "ViewController.h"
#import <Highcharts/Highcharts.h>

@interface ViewController ()
@property (strong, nonatomic) HIChartView *chartView;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // 在加载视图完成后进行其他设置，通常是从 nib 开始

    self.chartView = [[HIChartView alloc] initWithFrame:CGRectMake(self.view.bounds.origin.x, self.view.bounds.origin.y + 20, self.view.bounds.size.width, 300.0f)];

    HIOptions *options = [[HIOptions alloc]init];

    HIChart *chart = [[HIChart alloc]init];
    chart.type = @"column";
    options.chart = chart;

    HITitle *title = [[HITitle alloc]init];
    title.text = @"Demo chart";
    options.title = title;

    HIColumn *series = [[HIColumn alloc]init];
    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];
    self.chartView.options = options;

    [self.view addSubview:self.chartView];
}

@end

更多详情请参考 Highcharts 提供的演示 Demo HighFit 或阅读以下文档

更多内容

1. 附加模块

在使用附加模块的情况下，请将其添加到 plugins 的 HIChartView 对象之前分配的图表选项，如：

self.chartView.plugins = @[ @"annotations" ];
...
self.chartView.options = options;

2. HIColor 的示例

Highcharts iOS 扩展包提供了自己的颜色实现。在图表配置里，有部分配置是 HIColor 类型。您可以通过多种方法来是实例化所需的颜色（详见 API 文档）。在这里，我们简单说明最复杂的渐变颜色的使用。

HIChart *chart = [[HIChart alloc]init];
chart.backgroundColor = [[HIColor alloc]initWithLinearGradient:@{ @"x1": @0, @"x2": @0, @"y1": @0, @"y2": @300 } stops:@[
    @[@0, @"rgb(102, 153, 161)"],
    @[@1, @"rgb(128, 135, 232)"]
]];

3. HIFunction 示例

Highcharts iOS 支持点击事件回调函数与原生程序绑定（即可以在点击事件里执行 iOS 原生行为）。下面示例展示了通过原生 alert 来显示当前点击的点的坐标。

首先，您需要为您的系列类型创建一个 plotOptions 对象

HIPlotOptions *plotOptions = [[HIPlotOptions alloc] init];
plotOptions.series = [[HISeries alloc] init];

现在，您可以使用点事件并添加单击关闭，如下所示：

plotOptions.series.point = [[HIPoint alloc] init];
plotOptions.series.point.events = [[HIEvents alloc] init];

HIClosure closure = ^(HIChartContext *context) {
    NSString *alertMessage = [NSString stringWithFormat:@"Category: %@, value: %@", [context getProperty:@"this.category"], [context getProperty:@"this.y"]];

    UIAlertController *alert = [UIAlertController alertControllerWithTitle:nil message:alertMessage preferredStyle:UIAlertControllerStyleAlert];
    UIAlertAction *defaultAction = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:^(UIAlertAction * action) {}];
    [alert addAction:defaultAction];
    [self presentViewController:alert animated:YES completion:nil];
};

plotOptions.series.point.events.click = [[HIFunction alloc] initWithClosure:closure properties:@[@"this.category", @"this.y"]];

向您在上面代码片段中看到的一样，第一个参数 HIFunction 实际上是一个闭包。第二个参数是图表元素的简单字符串数组。我们需要将它们放在这里让扩展包在 HIFunction 实例化期间为我们提取它们。有了这个，我们可以通过 getProperty: 方法引用这些元素对应的值。您可以从此图表提取任何数据。根据实际的需要，您可以运行一些代码从图表中提取数据，将字符串返回给图表（例如：在 HITooltip 格式化中），甚至将纯 Javascript 函数以 String 的格式放在构造函数中。有关的更多信息，请查看 API 文档

4. 自定义字体

Highcharts iOS 扩展包允许您添加自定义字体。如果您有自己的字体并想在图表中使用该字体，请按照以下步骤操作：

将字体文件添加到项目中。从菜单栏中选择 File -> Add Files to “Your Project Name” 或将文件拖放到 Xcode 项目中，选中 Copy items if needed 选项，并将字体添加到您的应用目标路径下。
添加您的字体 HIChartView 。要做到这一点，首先您需要获得指向字体位置的绝对路径，然后调用 addFont: 方法：
```
NSString *fontPath = [[NSBundle mainBundle] pathForResource:@"Windsong" ofType:@"ttf"];
[HIChartView addFont:fontPath];
```
现在，您可以在图表中使用自定义字体。例如，更改图表标题字体。您只需要为标题创建样式对象，并将其字体系列设置为字体文件名：
```
title.style = [[HICSSObject alloc] init];
title.style.fontFamily = @"Windsong";
```