Highcharts 图表库安装指南：从入门到精通

原创于 2025-06-03 09:06:32 发布 · 378 阅读

CC 4.0 BY-SA版权

Highcharts 图表库安装指南：从入门到精通

highcharts Highcharts JS, the JavaScript charting framework 项目地址: https://gitcode.com/gh_mirrors/hi/highcharts

前言

Highcharts 是一款功能强大的 JavaScript 图表库，广泛应用于数据可视化领域。本文将详细介绍 Highcharts 核心库及其扩展产品（Stock、Maps、Gantt）的多种安装方式，帮助开发者根据项目需求选择最适合的安装方案。

安装方式概览

Highcharts 提供了灵活的安装选项，主要包括以下几种：

npm 包管理器安装（推荐用于现代前端项目）
CDN 直接引入（适合快速原型开发）
本地服务器部署（适合企业内网环境）
ES6 模块化引入（支持 tree shaking 优化）
AMD/CommonJS 模块引入（兼容传统模块系统）

详细安装方法

1. 使用 npm 安装（推荐）

对于使用现代前端构建工具（如 Webpack、Rollup 或 Vite）的项目，推荐通过 npm 安装 Highcharts：

npm install highcharts

安装后，可以在项目中通过 import 语句引入：

import Highcharts from 'highcharts';

优势：

版本管理方便
与构建工具无缝集成
便于实现 tree shaking 优化

2. CDN 引入方式

对于快速原型开发或简单页面，可以直接通过 CDN 引入：

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

如需指定版本（如 v12），可以使用：

<script src="https://code.highcharts.com/12/highcharts.js"></script>

注意事项：

生产环境应考虑 CDN 的可用性和加载速度
对于关键业务系统，建议配合本地 fallback 方案

3. 本地服务器部署

从官网下载 Highcharts 压缩包
解压后将相关文件放入项目目录（如 /js）
在 HTML 中引用：

<script src="/js/highcharts.js"></script>

适用场景：

内网环境
对第三方依赖有严格管控要求的项目
需要高度定制化的场景

4. ES6 模块化引入

现代前端项目可以通过 ES6 模块方式引入：

import Highcharts from 'highcharts/es-modules/masters/highcharts.src.js';

优化建议：

配合 tree shaking 可显著减小打包体积
适合对性能要求较高的项目

5. AMD/CommonJS 模块引入

传统项目可以通过以下方式引入：

// AMD (如 RequireJS)
require(['highcharts'], function(Highcharts) {
    // 使用 Highcharts
});

// CommonJS (如 Node.js)
const Highcharts = require('highcharts');

高级产品安装说明

Highcharts 提供了多个专业扩展产品：

Highcharts Stock：金融图表解决方案
Highcharts Maps：地理信息可视化
Highcharts Gantt：甘特图解决方案

重要原则：

这些产品已包含 Highcharts 核心，无需重复引入
同一页面不能同时加载多个完整产品包（如 highcharts.js 和 highstock.js）

正确引入方式：

<!-- 核心库 + 模块化扩展 -->
<script src="/js/highcharts.js"></script>
<script src="/js/modules/stock.js"></script>
<script src="/js/modules/map.js"></script>
<script src="/js/modules/gantt.js"></script>