Highcharts教程，从入门到精通怎么学？-杰瑞科技汇

Highcharts 教程：从入门到精通

Highcharts 是什么？
准备工作：引入 Highcharts
你的第一个图表：Hello World!
核心概念：理解 Highcharts 的结构
- 1 图表容器
- 2 配置对象
- 3 series (数据系列)
- 4 xAxis / yAxis (坐标轴)
- 5 title / subtitle (标题)
- 6 legend (图例)
- 7 tooltip (提示框)
实战演练：创建一个折线图
进阶技巧与最佳实践
- 1 数据动态更新
- 2 事件处理 (点击、鼠标悬停)
- 3 导出功能
- 4 响应式设计
- 5 使用模块化加载 (推荐)
常见图表类型速览
官方资源与学习路径

Highcharts 是什么？

Highcharts 是一个用纯 JavaScript 编写，非常流行、功能强大且易于使用的图表库，它支持几乎所有常见的图表类型，如折线图、柱状图、饼图、散点图、面积图、气泡图等。

（图片来源网络，侵删）

主要特点：

跨浏览器兼容：支持所有现代浏览器和移动设备。
丰富的图表类型：超过 20 种内置图表类型。
高度可定制：从颜色、字体到动画效果,几乎所有元素都可以自定义。
交互性强：内置缩放、平移、工具提示、图例点击等交互功能。
免费与付费：对非商业用途免费,商业项目需要购买许可证。

准备工作：引入 Highcharts

最简单的方式是通过 CDN (内容分发网络) 直接引入 Highcharts 的核心库和主题文件。

步骤：

在你的 HTML 文件的 <head> 标签中，引入 Highcharts 的 CSS 和 JS 文件。
准备一个 <div> 元素作为图表的容器。
在 <script> 标签中编写你的图表初始化代码。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">Highcharts 教程</title>
    <!-- 1. 引入 Highcharts 核心库 -->
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <!-- 可选：引入一些主题，可以让图表更美观 -->
    <script src="https://code.highcharts.com/themes/grid-light.js"></script>
</head>
<body>
    <!-- 2. 创建图表容器 -->
    <div id="container" style="width: 100%; height: 400px;"></div>
    <script>
        // 你的图表代码将写在这里
        // ... (下一节的内容)
    </script>
</body>
</html>

你的第一个图表：Hello World!

让我们在 <script> 标签里写下最简单的代码,创建一个空白的图表。

（图片来源网络，侵删）

// 当 DOM 加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 初始化图表
    Highcharts.chart('container', {
        // 这里的配置项将在下一节详细讲解
        title: {
            text: '我的第一个 Highcharts 图表'
        },
        xAxis: {
            categories: ['一月', '二月', '三月', '四月', '五月', '六月']
        },
        yAxis: {
            title: {
                text: '温度 (°C)'
            }
        },
        series: [{ // 数据系列
            name: '平均气温',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]
        }]
    });
});

将这段代码插入到上一节的 <script> 标签中，保存并用浏览器打开 HTML 文件，恭喜你，你已经成功创建了你的第一个 Highcharts 图表！

核心概念：理解 Highcharts 的结构

Highcharts 的核心是一个配置对象，你通过设置这个对象的各种属性来定义图表的外观和行为,让我们来分解一下最常用的配置项。

1 图表容器

Highcharts.chart() 的第一个参数 'container' 是你 HTML 中 <div> 的 id，Highcharts 会将图表绘制到这个 div 中。

2 配置对象

Highcharts.chart() 的第二个参数是一个 JavaScript 对象,包含了图表的所有配置。

（图片来源网络，侵删）

3 `series` (数据系列)

series 是图表的核心，它定义了你要显示的数据，一个图表可以有多个 series，一个图表可以同时显示“销售额”和“利润”两条折线。

每个 series 是一个对象,至少包含两个属性：

name: 系列的名称,会显示在图例中。
data: 一个数组，包含该系列的数据点，可以是数字 [1, 2, 3]，也可以是对象 [{y: 1, name: 'A'}, {y: 2, name: 'B'}]。

series: [{
    name: '东京',
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]
}, {
    name: '纽约',
    data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0]
}]

4 `xAxis` / `yAxis` (坐标轴)

xAxis: 定义 X 轴。
- categories: X 轴是分类（如月份、名称）,使用这个属性。
- title: X 轴的标题。
yAxis: 定义 Y 轴。
- title: Y 轴的标题。

5 `title` / `subtitle` (标题)

text: 主标题的文本。
text: 副标题的文本。

6 `legend` (图例)

控制图例的显示和行为。

enabled: 是否显示图例 (默认 true)。

7 `tooltip` (提示框)

当鼠标悬停在数据点上时显示的提示框。

enabled: 是否启用提示框 (默认 true)。
shared: 如果为 true，当悬停在多个系列的数据点上时,会将它们的信息合并显示。

实战演练：创建一个折线图

结合以上所有概念，我们来创建一个更完整的折线图示例,展示多个城市的数据对比。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">多城市气温对比</title>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/themes/grid-light.js"></script>
</head>
<body>
    <div id="line-chart-container" style="width: 100%; max-width: 800px; height: 400px; margin: 0 auto;"></div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            Highcharts.chart('line-chart-container', {
                // 1. 标题
                title: {
                    text: '2025年上半年主要城市平均气温对比'
                },
                // 2. 副标题
                subtitle: {
                    text: '数据来源：模拟数据'
                },
                // 3. X轴
                xAxis: {
                    categories: ['一月', '二月', '三月', '四月', '五月', '六月']
                },
                // 4. Y轴
                yAxis: {
                    title: {
                        text: '温度 (°C)'
                    }
                },
                // 5. 提示框
                tooltip: {
                    // 当悬停时，共享提示框信息
                    shared: true,
                    // 格式化提示框内容
                    valueSuffix: ' °C'
                },
                // 6. 图例
                legend: {
                    layout: 'vertical', // 垂直布局
                    align: 'right',     // 右对齐
                    verticalAlign: 'middle' // 垂直居中
                },
                // 7. 数据系列
                series: [
                    {
                        name: '北京',
                        data: [-1.0, 1.0, 7.0, 15.0, 21.0, 26.0]
                    },
                    {
                        name: '上海',
                        data: [5.0, 6.0, 10.0, 17.0, 22.0, 27.0]
                    },
                    {
                        name: '广州',
                        data: [14.0, 15.0, 18.0, 23.0, 27.0, 29.0]
                    }
                ],
                // 8. 导出功能
                exporting: {
                    enabled: true
                }
            });
        });
    </script>
</body>
</html>

代码解读：

我们为每个 series 添加了 name,用于在图例中区分。
设置了 tooltip.shared: true,这样鼠标悬停时可以看到所有城市该月份的温度。
使用 legend 的布局属性,让图例垂直排列在右侧。
添加了 exporting.enabled: true,这样用户就可以点击图表右上角的菜单来导出图片或PDF。

进阶技巧与最佳实践

1 数据动态更新

你可以随时通过 update() 方法来更新图表的数据。

// 假设你的图表实例已经存储在变量 chart 中
let chart = Highcharts.chart('container', { /* ... 初始配置 ... */ });
// 模拟从服务器获取新数据
function updateData() {
    const newData = [/* ... 新的数据数组 ... */];
    // 更新第一个数据系列
    chart.series[0].setData(newData, true); // 第二个参数 true 表示重绘动画
}
// 5秒后更新一次数据
setTimeout(updateData, 5000);

2 事件处理

Highcharts 提供了丰富的事件，如 click (点击)、load (加载完成)、redraw (重绘) 等。

Highcharts.chart('container', {
    // ... 其他配置 ...
    series: [{ /* ... */ }],
    // 添加事件处理
    chart: {
        events: {
            load: function() {
                console.log('图表加载完成！');
            }
        }
    },
    plotOptions: {
        series: {
            point: {
                events: {
                    click: function() {
                        // this 指向被点击的数据点
                        alert(`你点击了 ${this.series.name} 的 ${this.category} 数据，值为 ${this.y}`);
                    }
                }
            }
        }
    }
});

3 导出功能

除了通过 exporting 配置启用，你还可以通过 API 控制。

// 在配置中启用
exporting: {
    enabled: true
}
// 或者通过 API 手动触发
// chart.exportChart(); // 导出为 PNG
// chart.exportChart({ type: 'application/pdf' }); // 导出为 PDF

4 响应式设计

Highcharts 内置了响应式支持，你可以通过 responsive 配置来定义不同屏幕尺寸下的行为。

responsive: {
    rules: [{
        condition: { // 当容器宽度小于 500px 时
            maxWidth: 500
        },
        chartOptions: {
            // 隐藏图例
            legend: {
                enabled: false
            },
            // 修改标题字体大小
            title: {
                style: {
                    fontSize: '16px'
                }
            }
        }
    }]
}

5 使用模块化加载 (推荐)

在现代前端项目中（如使用 Vue, React, Webpack, Vite），推荐使用 ES6 模块的方式引入 Highcharts,这样可以减小打包体积。

# 首先安装 highcharts
npm install highcharts
# 或
yarn add highcharts

然后在你的 JavaScript 文件中：

import Highcharts from 'highcharts';
import HighchartsMore from 'highcharts/highcharts-more'; // 如果需要更多图表类型
import exportingInit from 'highcharts/modules/exporting'; // 如果需要导出功能
// 初始化模块
HighchartsMore(Highcharts);
exportingInit(Highcharts);
// 然后就可以像以前一样使用 Highcharts 了
Highcharts.chart('container', { /* ... */ });

常见图表类型速览

除了折线图，切换图表类型通常只需要修改 chart.type 配置。

柱状图

chart: {
    type: 'column' // 改为 'column'
}

饼图

chart: {
    type: 'pie'
},
// 饼图的 xAxis 通常不需要
xAxis: {
    categories: [] // 可以留空
},

面积图
```
chart: {
    type: 'area'
}
```

散点图

chart: {
    type: 'scatter'
},
// 散点图的数据通常是 { x, y } 对象
series: [{
    name: '数据点',
    data: [
        { x: 10, y: 20 },
        { x: 15, y: 10 },
        // ...
    ]
}]

官方资源与学习路径

Highcharts 的官方文档是最好的学习资料。

Highcharts 官方网站: 首页,可以看到所有示例和介绍。
Highcharts 文档: 最重要的资源，这里是所有配置项、方法和事件的详细 API 参考，当你不确定某个属性怎么用时,就来这里查。
Highcharts 示例库: 学习的最佳起点，这里有上百个可交互的图表示例，你可以查看每个示例的源代码，直接复制修改,快速实现你想要的效果。
Highcharts 论坛: 遇到问题,可以在论坛搜索或提问。

学习建议路径：

入门：跟着本教程创建第一个图表,理解基本结构。
模仿：去示例库找一个你喜欢的图表，点击“View options”查看其配置代码,尝试在自己的项目中复现它。
查阅：在模仿和开发过程中，遇到不懂的配置项，立刻查阅官方文档。
进阶：学习模块化加载、事件处理、动态数据等高级技巧。

Highcharts 是一个功能强大且文档完善的图表库，通过本教程,你已经掌握了：

如何快速引入和使用 Highcharts。
理解其核心配置对象的结构。
能够创建并自定义常见的折线图。
了解了数据更新、事件处理等进阶用法。

最好的老师永远是官方的示例库和API文档，多看、多练、多查，你很快就能熟练使用 Highcharts 制作出各种精美的数据可视化图表,祝你编码愉快！

Highcharts教程，从入门到精通怎么学？