通过 NPM 安装

添加 Highcharts 仪表盘到您的网页的一种方法是通过 npm 脚本。您可以通过包获取所有 仪表盘 功能，可以使用以下脚本进行安装：

npm install @highcharts/dashboards

然后在你的项目中导入该包：

import * as Dashboards from '@highcharts/dashboards';

如果您不打算使用自己的 自定义布局，也可以导入并注册布局模块：

import * as Dashboards from '@highcharts/dashboards';
import LayoutModule from '@highcharts/dashboards/modules/layout';

LayoutModule(Dashboards);

通过脚本标签引入仪表盘

将 JavaScript 文件包含在你网页的 <head> 部分，如下所示。

<script src="https://code.highcharts.com/dashboards/dashboards.js"></script>
<script src="https://code.highcharts.com/dashboards/modules/layout.js"></script>

从你的域名加载文件

在上面的示例中，Javascript 文件是从 code.highcharts.com加载的，但你也可以从 highcharts.com 下载文件并将它们包含在你网页中。这里是一个将 Highcharts 仪表盘部署在你自己服务器上的示例：

<script src="../code/dashboards/dashboards.js"></script>
<script src="../code/dashboards/modules/layout.js"></script>

加载额外的模块

你可能想在网页中加入一些基本 dashboards.js 模块未包含的附加模块。基本模块允许你创建基础仪表盘，使用 HTMLComponents，但如果你想使用预定义的组件类型，就需要添加必要的模块。例如，要使用 Highcharts 组件，你需要添加以下脚本：

../highcharts.js
../dashboards/dashboards.js

如果您使用 npm，可以按如下方式导入模块：

import * as Highcharts from 'highcharts';
import * as Dashboards from '@highcharts/dashboards';

然后，您可以使用 HighchartsPlugin 将 Highcharts 组件与仪表盘连接起来。
其他插件也类似，例如网格（Grid）。

Dashboards.HighchartsPlugin.custom.connectHighcharts(Highcharts);
Dashboards.PluginHandler.addPlugin(Dashboards.HighchartsPlugin);

现在，您可以开始使用仪表盘了。查看 创建第一个仪表盘 以开始。

# npm
Logo
亚马逊云科技技术品牌专区

更多推荐

open-code-review Codex 插件教程：对话式调用评审技能指南

本文是一份面向新手的 **open-code-review Codex 插件教程**，教你在 Codex 中通过对话式方式调用 open-code-review 的 AI 代码评审技能。open-code-review 是阿里巴巴开源的 AI 代码评审工具，采用"确定性流水线 + LLM Agent"混合架构，内置多语言评审规则（NPE、线程安全、XSS、SQL 注入等），可在 Codex 里用一

avatar 亚马逊云科技技术品牌专区

OBS Studio 完整指南：免费开源录屏与直播软件从零上手

想做一场像模像样的直播，或者把屏幕内容录成教程视频，但一想到商用软件的订阅费就有些犹豫？其实你不需要花一分钱。OBS Studio 是一款免费开源的直播与录屏软件，支持 Windows、macOS 和 Linux，采集、混音、编码、推流、录制，一条流水线全包了。## 先搞清楚 OBS Studio 是什么OBS Studio 是一个"场景化"的采集合成工具：你把摄像头、窗口、浏览器、图片、

avatar 亚马逊云科技技术品牌专区

如何用MediaCrawler爬取小红书抖音数据？7大平台爬虫从安装到实战完整指南

MediaCrawler 是一个支持小红书、抖音、快手、B站、微博、百度贴吧、知乎的开源自媒体数据采集工具。它能按关键词、按帖子、按创作者主页三种方式抓取笔记/视频内容、评论甚至二级评论，并把结果存成 JSON、CSV、Excel 或数据库。适合做市场调研、竞品监控、内容选题的运营人员，以及想要现成爬虫框架而不想从零写 JS 逆向的开发者。## 从一次"手动抄数据"说起想象这个场景：你负责

avatar 亚马逊云科技技术品牌专区