Highcharts 图表库安装指南：五种方式快速上手-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00941/article/details/148393315

Highcharts 图表库安装指南：五种方式快速上手

highcharts 项目地址: https://gitcode.com/gh_mirrors/high/highcharts

前言

Highcharts 是一款功能强大的数据可视化 JavaScript 库，支持创建各种交互式图表。本文将详细介绍 Highcharts 核心库及其扩展产品（Stock、Maps 和 Gantt）的安装方法，帮助开发者选择最适合项目需求的集成方式。

安装方式概览

Highcharts 提供了多种灵活的安装方案，开发者可根据项目环境和需求选择：

1. 使用 npm 安装（推荐用于现代前端项目）

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

npm install highcharts

这种方式优势明显：

便于版本管理
可与其他前端依赖统一管理
支持按需加载和 Tree Shaking 优化

安装后，可通过 ES6 模块方式导入：

import Highcharts from 'highcharts';

2. CDN 引入（快速原型开发首选）

对于快速原型开发或简单项目，可以直接使用 Highcharts 官方 CDN：

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

版本控制建议：

生产环境推荐锁定特定主版本（如 v10）

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

避免直接使用最新版本，防止潜在的兼容性问题

3. 本地文件引入（企业级部署方案）

对于需要高度可控性的企业级应用，建议下载 Highcharts 库文件并自行托管：

从官网下载最新版本
将文件部署到项目静态资源目录
通过相对路径引用：

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

优势：

不依赖外部 CDN
符合严格的安全策略要求
可进行自定义修改

4. ES6 模块化加载（现代前端最佳实践）

对于使用现代 JavaScript 的项目，推荐使用 ES6 模块化方式：

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

这种方式支持：

真正的按需加载
Tree Shaking 优化
更好的代码组织

5. AMD/CommonJS 模块加载（传统项目兼容方案）

对于使用 RequireJS 等模块加载器的传统项目：

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

// CommonJS
const Highcharts = require('highcharts');

高级产品集成指南

Highcharts 扩展产品（Stock、Maps 和 Gantt）的集成需要特别注意：

独立版本使用

每个扩展产品都包含完整的 Highcharts 核心，可直接使用：

<!-- 股票图表 -->
<script src="https://code.highcharts.com/stock/highstock.js"></script>

<!-- 地图 -->
<script src="https://code.highcharts.com/maps/highmaps.js"></script>

<!-- 甘特图 -->
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script"

模块化组合使用

如需在同一页面使用多个产品，应采用模块化方式：

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

重要提示：避免同时加载多个独立版本文件（如 highcharts.js 和 highstock.js），这会导致冲突。