HIGHCHARTS
  • 关于我们
    • 关于我们
    • 联系方式
    • 新闻动态
    • 合作伙伴
  • 在线商店
  • 在线实例
    • Highcharts 演示
    • Highcharts Stock 演示
    • Highcharts Maps 演示
    • Highcharts Gantt 演示
    • 图集new
    • 客户案例
  • 文档教程
    • 使用教程
    • API 文档
    • 兼容性
    • 常见错误
    • 更新日志
  • 服务与支持
    • 获取技术支持
    • 下载中心
    • 地图数据
    • 产品规划
  • 产品中心
    • Highcharts
    • Highcharts Stock
    • Highcharts Map
    • Highcharts iOS
    • Highcharts Android
    • JShare
    • 爱图说
    • Highcharts 云服务
    • Highcharts 编辑器
    • 插件扩展
    • 应用扩展
  • 博客
  • 技术社区
  • 快速上手
    • Highcharts 系列软件简介
    • 1 分钟上手 Highcharts
    • 文件下载与使用
    • 通过 npm 安装
    • 通过 Bower 安装
    • 如何设置图表配置选项
    • Highcharts 兼容性
    • Highcharts 使用协议
  • 基础教程
    • 图表主要组成
    • 图表配置
    • 标题
    • 坐标轴
    • 数据列
    • 颜色
    • 数据提示框
    • 图例
    • 版权信息
    • HTML标签
    • 标示线
    • 标示带
    • 图表缩放
    • 语言文字
    • 标签及字符串格式化
    • 钻取功能
    • 3D 图表
    • 响应式
  • 数据处理
    • 数据处理概述
    • 服务端动态渲染图表
    • Ajax 请求数据接口
    • 处理文本或文本数据文件
    • 数据功能模块
  • 图表类型
    • 图表类型
    • 直线图
    • 曲线图
    • 面积图及面积范围图
    • 柱状图和条形图
    • 饼图
    • 范围图
    • 散点图及气泡图
    • 漏斗图及金字塔图
    • 极地图
    • 瀑布图
    • 误差线图
    • 箱线图
  • 高级特性
    • 堆叠图
    • 自由绘图
    • 国际化
  • 图表导出模块
    • 图表导出模块概述
    • 客户端导出
    • 搭建导出服务器
    • 命令行导出
    • 导出 Excel 数据文件
  • 图表设计及样式
    • 图表设计及样式
    • 颜色
    • 主题
  • 插件扩展
    • 插件扩展概述
    • 创建插件
    • 提交插件到官方插件库
  • 地图(Highmaps)
    • 开始使用 Highmaps
    • 地图数据集
    • 经纬度
    • 地图导航器
  • 股票图(Highstock)
    • 开始使用 Highstock
    • 范围选择器
    • 导航器
    • 滚动条
    • K 线图
    • 技术指标
    • 自定义技术指标
  • 官方扩展包(Vue React Angular iOS Android .NET)
    • Highcharts .NET
    • Highcharts Vue
    • Highcharts React
    • Highcharts Angular
    • Highcharts iOS
    • Highcharts Android
收起菜单 教程目录

Highcharts iOS

最后修改时间:2019-08-26 19:31

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

版权声明

本教程仅用于学习、研究和交流目的,欢迎非商业转载。转载请注明出处及完整的链接。

标题:Highcharts iOS | Highcharts 使用教程

链接:https://www.hcharts.cn/docs/highcharts-ios/

   上一篇 下一篇   
  目录
    简数科技微信,同步更新Highcharts教程

    订阅更新

    © 2022 Highcharts 中文官网, 由 简数科技 提供服务, 浙ICP备16004892号-6, 浙公网安备33011002011664号
    在线客服

    选择服务类型

    技术问题

    • 技术社区
    • 技术支持
    • Q Q 群

    商业授权

    • 使用协议
    • 购买授权
    • 申请试用
    • 授权查询

    图表定制

    • 服务内容
    • VIP 专属服务

    销售服务:    技术服务:

    服务热线:0571 - 8620 8605 / 181 0659 5564    邮件:sales@jianshukeji.com

    服务时间:工作日 9:00 ~ 18:00    紧急服务 :7 x 24 响应(仅限电话)

    重要通知!

    尊敬的用户您好:
    由于域名备案调整,我们将于 2023-01-01 ~ 2023-01-07 日陆续停用 highcharts.com.cn 域名,受影响的网站及域名如下:

    网站或服务名称域名替代的网站
    主站www.highcharts.com.cnwww.hcharts.cn
    静态资源服务/CDNcdn.highcharts.com.cn
    code.highcharts.com.cn
    code.hcharts.cn
    img.highcharts.com.cnimg.hcharts.cn
    API 文档api.highcharts.com.cnapi.hcharts.cn
    导出服务export.highcharts.com.cnexport.hcharts.cn

    以上网站服务及 highcharts.com.cn 域名下的网站将于 2023-01-08 日全部下线,未来一段时间将不可访问,后续我们将上线新的网站。

    如果您的应用中有使用到相关服务,请抓紧时间对链接进行调整(特别是静态资源/CDN 服务的链接),以免影响您的网站或应用的正常运行,由此给您带来的不便,敬请谅解。

    如需帮助,请及时与我们联系:0571-86208605 / 18106595564(微信)。

    简数科技 2022-12-22