认识图表｜什么是 Radial Chart 径向图表？基于Highcharts的径向柱状图示例

基础定义

径向图表 = 将传统笛卡尔直角坐标系（X/Y 平面）的数据，映射到极坐标系（圆心 + 半径 + 角度）绘制的所有图表统称 所有图形围绕一个中心点向外放射排布，区别于横向 / 竖向铺开的普通图表。 核心两个极坐标变量：

日常口语里，大家说的径向图表大多特指径向条形图 Radial Bar Chart，广义径向图包含一大类变体。

径向图表主流细分类型

1. 径向条形图 Radial Bar

普通柱状图弯成一圈排布在圆环上

• X 分类 → 均分圆周角度，每一根柱子角度宽度固定
• Y 数值 → 柱子向外的长度（半径）
• 变种：堆叠径向条形、分组径向条形、半圆径向条

2. 径向折线图（雷达图 Radar Chart）

属于径向图最经典样式 多个指标维度均匀分布在圆周上，数值由圆心向外延展，连线围成多边形，多用于多维度评分对比（产品性能、员工考核、设备指标）

3. 径向柱状图 / 环形柱状

柱子紧贴圆环内侧排布，视觉紧凑，仪表盘、大屏看板高频使用

4. 径向面积图

闭合区域填充颜色，直观展示一组指标整体体量大小

5. 螺旋径向图 Spiral Radial

沿着螺旋线排布数据，适合长周期连续时序数据（多年月度数据、流水趋势）

6. 饼图、环形图（本质也是径向图表）

依靠角度大小表达数值占比，半径固定；和径向条形刚好相反：饼图看角度，径向条看半径

径向图表的特点

优点

致命缺点（业务分析慎用）

适用场景 & 不适用场景

✅ 适合使用

❌ 不建议使用

常用的 Highcharts 对应关系

Highcharts 里的 Radial Chart 一般可以理解为 径向图表 / 圆形条形图，具体取决于上下文：

• Radial / Circular bar chart：径向柱状图、圆形柱状图
• Polar chart：极坐标图，也常被称为雷达图、蜘蛛网图

也就是说，数据柱会沿着圆周方向展示，形成“环形柱状”的效果。

• chart: { polar: true } 开启极坐标 = 画布转为径向画布
• yAxis：对应半径（数值轴）
• xAxis：对应圆周角度（分类轴） 普通柱状图开启 polar 配置后，直接转为径向图表。

Highcharts 里怎么实现

如果你要做 径向柱状图，一般会用：

• chart.polar: true
• chart.inverted: true
• 需要加载 highcharts-more.js

下面是一个 Highcharts 径向柱状图（Radial / Circular bar chart） 的完整可运行示例。

Highcharts.chart('container', {
chart: {
polar: true,
inverted: true
},

title: {
text: '径向柱状图'
},

accessibility: {
enabled: true
},

pane: {
size: '85%'
},

xAxis: {
categories: ['A', 'B', 'C', 'D', 'E', 'F'],
tickmarkPlacement: 'on',
lineWidth: 0
},

yAxis: {
min: 0,
title: {
text: null
},
gridLineWidth: 1
},

tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">●</span> {series.name}: <b>{point.y}</b><br/>'
},

plotOptions: {
column: {
stacking: 'normal',
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},

series: [
{
type: 'column',
name: 'Series 1',
data: [5, 3, 4, 7, 2, 6]
},
{
type: 'column',
name: 'Series 2',
data: [2, 2, 3, 2, 1, 4]
}
]
});