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 类型。

图表	Highcharts 类型	数据结构
普通饼图	pie	y
可变半径饼图	variablepie	y + z
玫瑰图	polar + column	y