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