Highcharts Variable radius pie 可变半径饼图使用完全手册｜玩转科学图表创建

有些图表一看就很“科学”。南丁格尔玫瑰图（Nightingale Rose Chart）就是这样一种图表——它不仅是数据可视化工具，还是现代统计图形学的早期经典。

在 Highcharts 中，这种图表通常被称为 Variable Radius Pie（可变半径饼图）。

它的核心思想很简单，但非常巧妙：

普通饼图用“角度”表达数据，玫瑰图用“半径”表达数据。结果就是，每个扇区角度相同，但半径不同，看起来像一朵展开的花。

点击 here 查看上图代码.

南丁格尔玫瑰图最早由 Florence Nightingale 在 19 世纪提出，用于展示战争中士兵死亡原因。她用这种图表向英国议会证明：大多数士兵不是死于战斗，而是死于疾病。

这件事非常重要，因为它展示了一个真相：图表不仅能展示数据，还能改变决策。

因此，这种图表也被称为：

• 南丁格尔玫瑰图

• 极坐标面积图

• 可变半径饼图（Variable Radius Pie）

Highcharts Variable radius pie 可变半径饼图

可变半径饼图是一种圆形图表，其扇区的大小与它们所代表的数量或体积成正比。作为对标准饼图的补充，标准饼图只需要一个参数，而变量饼系列使用两个参数Y和Z，其中Y代表扇区的体积，Z代表扇区的半径。

若需更详细的示例和文档，请查看 API.

如何创建一个可变半径的饼图

变量半径饼图系列类型需要以下模块 modules/variablepie.js.

创建可变半径饼图的步骤如下：

1. 将系列类型设置为variablepie:

chart:{type:'variablepie'}

2. 在系列中使用 Y 和 Z 选项以显示每个扇形的体积和半径：

series:[{minPointSize:100,innerSize:'20%',data:[{y:505370,z:1},{y:551500,z:2},{y:312685,z:1},{y:78867,z:3},{y:301340,z:4},{y:41277,z:5},{y:357022,z:5}]}]

可变饼图系列的特定选项

• zMin:用于计算点的半径的最小Z值。如果点的Z值小于zMin，则扇区将根据zMin值绘制。zMin通过允许显示具有非常小Z值的扇区，改善了用户体验。
• zMax: 用于计算点半径的最大可能z值。如果点的Z值大于zMax，切片将根据zMax值绘制。zMax通过避免切片比例失衡，提升了用户体验。
• minPointSize: 此选项设置任何点的最小半径大小，值接近零。此选项的工作方式类似于柱状图中的minPointLength in column charts.
• maxPointSize: 点的最大半径大小。饼图扇形的半径不能大于 maxPointSize
• sizeBy: 大小方式 此选项与饼图中Z值的表示方式有关。饼块的数值可以用面积或半径来表示。默认的面积方式最符合人类对每个饼块大小的感知。

重要提示：国内很多文章都会把：Variable Pie 不等于 南丁格尔玫瑰图

更准确的表述应该是：Variable radius pie 是一种扩展饼图，用半径维度表达第二个数据变量。

而 玫瑰图属于极坐标柱状图的一种应用形式。

Highcharts 通过 极坐标 + column 类型 实现玫瑰图。

首先设置极坐标：

chart:{polar:true}

然后使用 column 系列。

示例代码：

Highcharts.chart('container',{chart:{polar:true,type:'column'},title:{text:'南丁格尔玫瑰图示例'},xAxis:{categories:['一月','二月','三月','四月','五月','六月','七月','八月'],tickmarkPlacement:'on'},yAxis:{min:0},series:[{name:'数据值',data:[5,8,12,7,10,6,9,4],pointPlacement:'on'}]});

关键配置：

polar: true
type: column

Highcharts 会自动生成极坐标柱形结构，从而形成玫瑰图效果。

总结

在 Highcharts 中：Variable Radius Pie（variablepie）有两个变量：

• Y → 扇区面积（体量）

• Z → 扇区半径

因此每个数据点需要：

{
y: value,
z: radius
}

换句话说：普通饼图只有 一个变量（Y），可变半径饼图有 两个变量（Y + Z）这就是它最大的区别。

玫瑰图和 Variable Pie

通过 polar + column 实现玫瑰图，在技术上是成立的，但它对应的是 另一种图表：Polar Column / Rose Chart

实现方式：

chart: { polar: true }, series: [{ type: ‘column’ }]

这种图表：角度相同、半径不同，它更接近统计学里的 Nightingale Rose Chart。

但它 不是 Highcharts 的 variablepie 类型。