尧图网站建设 免费方案咨询
ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

首页/资讯中心/资讯详情

智能数据分析组件Orbit 正式发布与快速上手体验教程

发布时间：2026/11/4 12:13:35 尧图网站建设
智能数据分析组件Orbit 正式发布与快速上手体验教程

简介

Highcharts 的智能数据分析系统/平台 Orbit与10月28日在总部正式发布，标志着你可以从Highcharts 图表接入人工智能大模型、实现一套交互式具有智能分析工具栏的BI系统。终端用户通过工具栏，直接查看统计汇总、拟合趋势线、时序预测、异常点检测、数据筛选、添加标注、导出图表结果。所有分析运算都在浏览器本地执行，原有图表代码几乎不用改动。

本篇教程基于最新公布的 Orbit 官方指南（只需要登录 Orbit 账号访问），实现一个 HTML 预览的文件，三步即可完成：引入模块、在图表上开启 Orbit、预览页面。

前置准备

  1. Orbit 部署密钥（deployment key）登录 Orbit 后台门户：https://orbit.highcharts.com/portal/，进入 Deployments（部署管理），选中一条部署记录。Embed 区域会给出带有密钥的 script 标签，密钥前缀为orb_。
  2. Highcharts 基础库Orbit 是附加能力，不内置 Highcharts，二者是独立产品、拥有独立许可协议。

第1步：引入 Highcharts 和 Orbit

新建index.html，在<head>中引入脚本，把YOUR_API_KEY替换成你的部署密钥：

<script src="[https://code.highcharts.com/highcharts.js](https://code.highcharts.com/highcharts.js)"></script> <script src="[https://code.highcharts.com/highcharts-more.js](https://code.highcharts.com/highcharts-more.js)"></script> <script src="[https://code.highcharts.com/modules/exporting.js](https://code.highcharts.com/modules/exporting.js)"></script> <script src="[https://code.highcharts.com/modules/annotations.js](https://code.highcharts.com/modules/annotations.js)"></script> <script src="[https://code.highcharts.com/modules/accessibility.js](https://code.highcharts.com/modules/accessibility.js)"></script> <script src="[https://orbit.highcharts.com/module/YOUR_API_KEY/orbit.js](https://orbit.highcharts.com/module/YOUR_API_KEY/orbit.js)"></script>

⚠️ 加载顺序很关键：Orbit 需要挂载到 Highcharts 上，必须放在 Highcharts 以及所有依赖模块之后引入。

各模块对应的能力：

  • exporting：支撑导出菜单
  • annotations：标注绘图工具
  • highcharts-more：提供面积区间图，Orbit 预测功能用来绘制置信区间带
  • accessibility：无障碍支持，适配读屏软件与键盘导航

补充说明：Orbit 不在code.highcharts.com或 npm 仓库分发。每一条部署记录对应独立的 Orbit 脚本地址，密钥写在 URL 内。工具权限、配额、允许域名都在后台门户配置，修改后刷新页面即可生效。

第2步：创建图表

在<body>内放置图表容器：

<div id="chart" style="height: 400px;"></div>

在容器下方编写图表代码。示例为月度营收数据，包含连续两年、两条销售渠道序列，方便演示各类分析工具：

Highcharts.chart('chart', { orbit: { enabled: true }, title: { text: 'Monthly Revenue' }, xAxis: { categories: [ 'Oct 2024', 'Nov 2024', 'Dec 2024', 'Jan 2025', 'Feb 2025', 'Mar 2025', 'Apr 2025', 'May 2025', 'Jun 2025', 'Jul 2025', 'Aug 2025', 'Sep 2025', 'Oct 2025', 'Nov 2025', 'Dec 2025', 'Jan 2026', 'Feb 2026', 'Mar 2026', 'Apr 2026', 'May 2026', 'Jun 2026', 'Jul 2026', 'Aug 2026', 'Sep 2026' ] }, yAxis: { title: { text: 'Revenue (USD)' } }, series: [{ name: 'Online', data: [ 41800, 45600, 45000, 44900, 48600, 47500, 49000, 53500, 56400, 56300, 55300, 58600, 58500, 59200, 62700, 64600, 66000, 67300, 71500, 72200, 71100, 72400, 76300, 78200 ] }, { name: 'In-store', data: [ 61200, 60600, 60700, 60100, 61000, 58700, 60400, 57100, 60500, 58800, 56100, 55900, 56400, 57000, 58200, 57100, 56800, 55000, 57600, 56100, 53900, 53000, 54000, 53600 ] }] });

核心配置只有一行：orbit: { enabled: true }，其余全部是标准 Highcharts 配置。

第3步：打开页面预览

使用本地 Web 服务运行页面，例如在项目目录执行：npx serve，访问给出的本地地址。

注意：Orbit 只会在部署配置里登记的域名上加载，本地调试请单独创建一条用于本地测试的部署记录。

渲染成功后，图表上方会出现 Orbit 工具栏，菜单分组如下：

  • View（视图）：切换图表展示形式，包含统计汇总表、分布直方图、KPI 指标卡片，同时支持全屏
  • Analyze（分析）：核心统计能力：相关性、贡献度分析、趋势线、时序预测、异常检测、控制限
  • Annotate（标注）：在图表上绘制形状、线条、文本批注
  • Transform（数据变换）：筛选数据、生成衍生序列（合计、比值等）
  • Share & Export：生成可复现当前分析状态的分享链接；导出图片或原始数据

可以依次体验：Analyze → Trends → Trend Line。

Orbit 会自动为每条序列拟合直线，用虚线绘制在图表上。面板会展示周期内涨跌幅度、R² 拟合优度（1 代表完全拟合）。在这个示例里，线上营收两年增长约 35000 美元，线下门店营收下降约 7000 美元。

域名白名单配置

密钥写在页面源码里，任何人都可以查看，密钥本身不是保密信息；真正的访问控制来自后台部署记录里的站点白名单列表。一条部署如果没有添加站点，在任何域名都无法加载 Orbit。

在后台部署配置页的 Sites 中填入业务域名，例如app.example.com，一条记录同时覆盖主域名与 www 子域名，只填写裸域名即可，协议、端口会被忽略。

本地测试规则：localhost、127.0.0.1、[::1]统一视为一个免费本地站点，不限端口。

重要：一条部署记录只能是【本地模式】或者【公网模式】，不能混用。建议单独创建一条部署密钥专门用于本地开发。

如果密钥泄露，组织管理员可以在部署页面执行 Rotate key（轮换密钥），旧密钥会立刻失效，之后把新的 script 标签替换到页面即可。密钥轮换、域名管理、限流策略可以查阅官方开发文档。

使用打包工具（Webpack/Vite等）怎么接入？

Orbit 加载时会读取window.Highcharts。如果你通过 npm 引入 Highcharts，需要把 Highcharts 挂载到 window 对象上，并且在创建图表之前加载 Orbit 脚本。React 官方封装方案可以参考文档：Sign in | Orbit

自定义配置：按需启用工具

把示例代码替换成你自己的任意 Highcharts 图表，只需要加上orbit: { enabled: true }，原有格式化函数、点击事件等逻辑全部保留。

默认会开启该部署下所有适配当前图表类型的工具。如果只想开放指定分析能力，可以通过tools数组配置白名单：

orbit: { enabled: true, tools: ['summary', 'trendline', 'forecast', 'export'] }

设置menuVisibility: 'compact'，工具栏会收拢成一个小按钮，节省页面空间。全部工具列表和高级配置项见官方高级配置文档。

进阶方向

  1. 页面模式（Page Mode）：Highcharts.orbitPage()，把页面内多张图表、Grid 表格整合为同一个工作区，支持全局筛选、并排对比分析
  2. AI 助手集成：llms.txt + Claude Skill，让 AI 编码助手直接生成合法的 Orbit 配置代码
  3. 官方 Demo：查看更多图表类型、数据表格、大屏看板的 Orbit 案例
  4. 工具栏深度解析博客：了解每个分析工具的底层能力

一句话总结：只需要引入一段脚本 + 一行配置，你的 Highcharts 图表立刻拥有一套开箱即用的浏览器端分析工具栏；工具权限、用户可见能力、多图表联动都可以自主控制。

相关信息（原文推荐博文）

  • Introducing Highcharts Orbit：为任意 Highcharts 图表提供完整分析层
  • Highcharts Orbit：图表内置重型数据分析能力
  • Highcharts Orbit toolbar：工具栏详解
  • Highcharts Orbit Admin：企业级部署、权限管理、规模化落地
网站建设 视觉设计 SEO优化
返回列表