Highcharts iOS

优质
小牛编辑
128浏览
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. 附加模块

在使用附加模块的情况下,请将其添加到 pluginsHIChartView 对象之前分配的图表选项,如:

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";