Highcharts 显示图例饼图（完整教程）

Highcharts 显示图例饼图：从零开始掌握数据可视化核心技能

在前端开发的世界里，数据可视化就像“说故事的画笔”。当一堆数字堆在页面上时，用户会感到疲惫甚至困惑。而一张清晰的饼图，能瞬间让人看懂“谁占了最大份额”。今天我们要聊的，正是如何用 Highcharts 实现一个带图例的饼图——这不仅是技术，更是一种表达方式。

如果你正在学习前端开发，或者想在项目中加入动态图表功能，那这篇文章就是为你准备的。我们不会一开始就抛出复杂的配置，而是从最基础的结构讲起，一步步带你搭建出一个专业级的 Highcharts 显示图例饼图。

什么是 Highcharts？为什么它适合做饼图？

Highcharts 是一个功能强大的 JavaScript 图表库，支持折线图、柱状图、饼图、雷达图等多种图表类型。它的优势在于：配置灵活、兼容性好、文档详尽，尤其适合在企业级项目中使用。

想象一下，你有一个销售数据表，包含不同城市的销售额。如果直接用表格展示，用户要看很久才能找出哪个城市贡献最多。但如果你用饼图，颜色鲜明、比例直观，一眼就能看出“华东区”是最大的一块。这就是 Highcharts 的价值所在。

而“显示图例”正是让饼图更易读的关键一步。图例告诉你“每种颜色代表哪个类别”，避免用户“猜颜色”。

第一步：引入 Highcharts 到你的项目

在开始写代码前，你需要先让浏览器能识别 Highcharts。最简单的方式是通过 CDN 引入。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Highcharts 显示图例饼图</title>
  <!-- 引入 Highcharts 官方 CDN 资源 -->
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <!-- 如果需要导出功能（如导出为图片），可额外引入 -->
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
  <!-- 图表容器 -->
  <div id="container" style="width: 600px; height: 400px; margin: 0 auto;"></div>
</body>
</html>

✅ 注释说明：

highcharts.js 是核心库，必须引入。

exporting.js 可选，用于支持“导出为 PNG/SVG”功能，如果不需要可以省略。

#container 是图表的渲染区域，必须设置宽高，否则图表不会显示。

第二步：创建一个基础饼图

现在，我们来写第一个完整的饼图代码。

// 初始化图表
document.addEventListener('DOMContentLoaded', function () {
  // 创建图表配置对象
  const chart = Highcharts.chart('container', {
    // 图表类型为饼图
    chart: {
      type: 'pie'
    },
    // 图表标题
    title: {
      text: '各城市销售额占比'
    },
    // 数据系列（核心部分）
    series: [{
      name: '销售额',
      data: [
        ['北京', 120],
        ['上海', 95],
        ['广州', 70],
        ['深圳', 85],
        ['杭州', 60]
      ]
    }]
  });
});

✅ 注释说明：

DOMContentLoaded 是 DOM 加载完成后的事件，确保页面元素已就绪。

type: 'pie' 明确指定图表类型为饼图。

series 是数据源，data 是一个二维数组，每项包含 [类别名, 数值]。

name 是该系列的名称，会在图例中显示。

此时，你已经看到一个基本的饼图了。但你会发现：没有图例！ 这就是我们要解决的问题。

第三步：让图例“现身”——启用图例显示

Highcharts 默认不显示图例，但只需几行配置即可开启。我们来修改之前的代码。

// 修改后的图表配置
const chart = Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  title: {
    text: '各城市销售额占比'
  },
  // 新增：启用图例显示
  legend: {
    enabled: true, // 开启图例功能
    layout: 'vertical', // 图例布局为垂直排列
    align: 'right',     // 对齐方式：靠右
    verticalAlign: 'top', // 垂直对齐：顶部
    x: 0,               // 水平偏移量
    y: 100,             // 垂直偏移量
    floating: false     // 是否浮动（不浮动时固定在图表下方）
  },
  series: [{
    name: '销售额',
    data: [
      ['北京', 120],
      ['上海', 95],
      ['广州', 70],
      ['深圳', 85],
      ['杭州', 60]
    ]
  }]
});

✅ 注释说明：

legend.enabled: true 是关键，开启图例。

layout: 'vertical' 让图例竖着排，更节省空间。

align: 'right' 和 verticalAlign: 'top' 控制图例在右上角位置。

x 和 y 可微调位置，避免遮挡图表。

floating: false 表示图例不浮动，固定在图表区域外。

现在，你看到的饼图右侧多了一个彩色图例，每个颜色块对应一个城市，用户一眼就能知道“红色是北京”。

第四步：优化图例样式与交互

为了让图例更美观、更友好，我们还可以进一步优化。

legend: {
  enabled: true,
  layout: 'vertical',
  align: 'right',
  verticalAlign: 'top',
  x: 0,
  y: 100,
  floating: false,
  // 图例项样式
  itemStyle: {
    fontSize: '12px',   // 字体大小
    color: '#333'       // 字体颜色
  },
  // 图例项鼠标悬停效果
  itemHoverStyle: {
    color: '#0077cc'    // 悬停时颜色变蓝
  },
  // 图例项点击时的隐藏/显示控制
  itemHiddenStyle: {
    color: '#999'       // 隐藏时变灰
  }
}

✅ 注释说明：

itemStyle 设置图例文字的字体和颜色。

itemHoverStyle 让用户鼠标悬停在图例项上时，颜色变亮，增强交互感。

itemHiddenStyle 当用户点击图例项隐藏某部分数据时，该部分变灰，视觉反馈清晰。

这个小细节，能极大提升用户体验。比如用户想“只看一线城市”，只需点击“广州”图例，它就自动隐藏，饼图比例也会重新计算。

第五步：实战案例——动态更新图例与数据

我们来做一个更实用的场景：让用户点击按钮，动态切换数据。

<button onclick="updateData()">切换数据：2023 vs 2024</button>

let currentData = '2023'; // 当前数据版本

function updateData() {
  // 切换数据
  if (currentData === '2023') {
    chart.series[0].setData([
      ['北京', 100],
      ['上海', 110],
      ['广州', 60],
      ['深圳', 90],
      ['杭州', 50]
    ]);
    currentData = '2024';
  } else {
    chart.series[0].setData([
      ['北京', 120],
      ['上海', 95],
      ['广州', 70],
      ['深圳', 85],
      ['杭州', 60]
    ]);
    currentData = '2023';
  }
}

✅ 注释说明：

chart.series[0].setData(...) 是动态更新数据的方法。

点击按钮后，图表自动刷新，图例也同步更新。

实际项目中，这种动态更新常用于数据筛选、时间切换等场景。

总结：掌握 Highcharts 显示图例饼图的关键点

通过今天的学习，我们一步步完成了从零到一的 Highcharts 显示图例饼图搭建。核心要点总结如下：

Highcharts 是前端数据可视化的利器，尤其适合饼图这类占比类图表。
图例（legend）是提升图表可读性的关键，通过 legend.enabled: true 即可开启。
通过 layout、align、verticalAlign 等属性，可以自由控制图例位置。
优化图例样式（itemStyle、itemHoverStyle）能让交互更友好。
动态更新数据（setData）让图表具备响应式能力，适用于真实业务场景。

如果你正在做报表系统、后台管理界面或数据分析平台，那么掌握 Highcharts 显示图例饼图，绝对是一项高价值技能。

别忘了：好的图表不是“好看”，而是“让人一眼看懂”。而 Highcharts，正是实现这一点的最佳工具之一。