Highcharts 圆环图（手把手讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

什么是 Highcharts 圆环图？

在数据可视化领域，Highcharts 是一款功能强大且广受欢迎的 JavaScript 图表库。它支持多种图表类型，其中 Highcharts 圆环图（也称环形图）因其直观的展示效果和灵活的配置选项，成为数据呈现的热门选择。圆环图通过内外半径的差异形成环状结构，既能清晰对比数据占比，又能通过留白区域增强视觉层次感。

对于编程初学者而言，Highcharts 的 API 设计友好，文档详尽，适合快速上手；中级开发者则可通过其丰富的配置项实现复杂交互和动态效果。本文将从基础配置到高级功能，结合代码示例和实际案例，系统讲解如何高效使用 Highcharts 圆环图。

快速入门：创建第一个圆环图

环境准备

要使用 Highcharts，需在 HTML 文件中引入其核心库和相关模块。由于圆环图属于饼图的变体，需确保引入 highcharts.js 和 highcharts-more.js：

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

基础配置步骤

1. 创建容器：在 HTML 中定义一个用于承载图表的 <div> 元素。
2. 初始化图表：通过 JavaScript 调用 Highcharts.chart() 方法。
3. 配置数据与样式：设置类型为 pie，并通过 innerSize 参数定义环形的空心比例。

示例代码

<div id="container" style="width: 600px; height: 400px;"></div>
<script>
Highcharts.chart('container', {
    chart: {
        type: 'pie' // 指定饼图类型
    },
    title: {
        text: '2023年市场占有率分布'
    },
    series: [{
        name: '市场份额',
        data: [
            { name: 'A公司', y: 35 },
            { name: 'B公司', y: 25 },
            { name: 'C公司', y: 20 },
            { name: '其他', y: 20 }
        ],
        innerSize: '50%' // 设置环形空心占比
    }]
});
</script>

关键点解析

• innerSize：数值可为百分比（如 50%）或固定像素值（如 200px）。当设置为 0% 时，图表退化为标准饼图。
• data 数组：每个对象的 y 属性表示数值，name 显示在图例或悬停提示中。

数据配置：从简单到复杂

数据格式规范

Highcharts 的数据配置支持两种形式：

1. 对象数组：包含 name 和 y 属性，适用于复杂场景。
2. 数值数组：仅提供数值，名称需通过 keys 或 categories 设置。

对比表格

动态数据加载

对于实时或动态数据，可通过 JavaScript 变量或 API 请求生成数据：

// 示例：通过函数生成随机数据
function generateData() {
    return [
        { name: 'A', y: Math.random() * 100 },
        { name: 'B', y: Math.random() * 100 }
    ];
}

Highcharts.chart('container', {
    // 其他配置...
    series: [{
        data: generateData() // 动态数据源
    }]
});

核心配置：外观与交互优化

样式定制

通过 plotOptions.pie 可全局控制饼图样式，而 series 配置项则针对单个图表生效。

常用配置项

• colors：设置全局配色方案。
• dataLabels：控制数值标签的显示位置和格式。
• tooltip：自定义悬停提示内容。

plotOptions: {
    pie: {
        allowPointSelect: true, // 允许点击选中
        cursor: 'pointer',      // 鼠标悬停样式
        dataLabels: {
            enabled: true,
            format: '<b>{point.name}</b>: {point.percentage:.1f}%' // 自定义标签格式
        }
    }
}

交互增强

Highcharts 支持事件绑定，例如点击扇区时触发函数：

plotOptions: {
    pie: {
        point: {
            events: {
                click: function() {
                    alert('您点击了：' + this.name);
                }
            }
        }
    }
}

进阶技巧：实现专业级图表

渐变色与阴影效果

通过 colorAxis 和 shadow 属性可提升视觉层次：

series: [{
    data: [
        { name: '数据1', y: 40, color: { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 }, stops: [[0, '#FFA07A'], [1, '#FFD700']] } },
        // 其他数据项...
    ],
    shadow: {
        width: 5,
        color: 'rgba(0,0,0,0.3)'
    }
}]

响应式设计

使用 responsive 配置项适配不同屏幕尺寸：

responsive: {
    rules: [{
        condition: {
            maxWidth: 600
        },
        chartOptions: {
            plotOptions: {
                pie: {
                    dataLabels: {
                        enabled: false // 小屏幕隐藏标签
                    }
                }
            }
        }
    }]
}

实战案例：动态数据仪表盘

需求分析

某电商平台需展示各产品类别的月度销售额，要求：

1. 环形图中央显示总销售额。
2. 点击扇区时弹出详细数据。
3. 支持手机端自适应。

完整代码实现

<div id="sales-chart" style="width: 100%; height: 500px;"></div>
<script>
Highcharts.chart('sales-chart', {
    chart: {
        type: 'pie',
        events: {
            load: function() { // 图表加载完成后执行
                const total = this.series[0].points.reduce((sum, point) => sum + point.y, 0);
                this.setTitle({ text: `总销售额：${total}万元` });
            }
        }
    },
    title: {
        text: ''
    },
    plotOptions: {
        pie: {
            innerSize: '60%',
            dataLabels: { enabled: false },
            point: {
                events: {
                    click: function() {
                        alert(`品类：${this.name}\n销售额：${this.y}万元`);
                    }
                }
            }
        }
    },
    series: [{
        name: '销售额',
        data: [
            { name: '电子产品', y: 120 },
            { name: '服饰', y: 80 },
            { name: '家居', y: 50 },
            { name: '食品', y: 30 }
        ]
    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 768
            },
            chartOptions: {
                chart: {
                    type: 'column' // 移动端切换为柱状图
                }
            }
        }]
    }
});
</script>

功能亮点

• 动态标题：通过 chart.events.load 计算并显示总销售额。
• 响应式切换：在移动端将环形图转换为更易读的柱状图。
• 事件绑定：点击扇区时弹出详细信息，提升用户交互体验。

性能优化与常见问题

减少资源占用

1. 按需加载模块：仅引入必要的文件（如无需柱状图时移除 highcharts-more.js）。
2. 数据压缩：对大数据集使用 dataGrouping 或 turboThreshold 参数。

Highcharts.setOptions({
    lang: {
        noData: '数据加载中...' // 自定义空状态提示
    },
    turboThreshold: 1000 // 允许处理超过1000个数据点
});

常见问题解决

• 图表不显示：检查容器尺寸是否为 0，或 JavaScript 报错。
• 数据比例异常：确保所有 y 值为数值类型，且总和不超过 100%。
• 移动端适配：使用 responsive 配置或 CSS 媒体查询。

总结与展望

Highcharts 圆环图凭借其灵活性和可扩展性，已成为数据可视化领域的标杆工具。从基础配置到动态交互，开发者可通过逐步优化实现专业级数据呈现。随着 Highcharts 的持续更新（如对 WebAssembly 的支持），未来在性能和交互维度将有更大突破。

对于读者而言，掌握 Highcharts 圆环图不仅能提升数据表达能力，更能为后续学习其他图表类型（如三维图、热力图）奠定坚实基础。建议读者通过官方文档和 GitHub 示例库持续探索，将理论与实践结合，逐步成长为数据可视化的高手。