在 Highcharts 中实现 Marimekko可变宽度图｜示例教程

定义

数据世界里有一种图表，看起来像一堵被精心切割的彩色砖墙。每一块砖不仅有高度，还有宽度，两种维度同时在讲故事。这就是 Marimekko Chart（可变宽图）。在 Highcharts 里，它是一种非常有商业分析味道的高级图表。

先把概念说清楚。普通柱状图只有一个核心变量：高度。
Marimekko 图则有两个：

• 高度表示一个指标，例如市场占比、销售额或利润率。
• 宽度表示另一个指标，例如市场规模、客户数量或地区体量。

于是每个矩形的面积就代表综合数据量。这种设计让一张图同时表达三件事：

• 一个类别的规模
• 该类别内部的结构
• 不同类别之间的对比

可变宽度图 Marimekko Chart

可变宽图是一种柱状图，其中每一列都有单独的宽度来表示第三个维度。可变图表与Marimekko图表相关，但是Marimekko计算堆栈的宽度以填充整个绘图区域，而可变图表只是让列的宽度反映一个值。

有关更详细的Highcharts示例和文档，请查看API..

点击这里查看代码。

Highcharts数据结构

variwide系列使用两个选项y和z。y选项决定了列的高度，就像普通的列图一样，z选项决定了列的宽度。查看API选项了解更多详细信息。

商业分析里，这非常有价值。

在统计和商业咨询领域，Marimekko 图常被称为 Mekko Chart 或 Market Structure Chart。很多咨询公司在市场分析报告里会用这种图，因为它能把“市场规模 + 市场份额”同时表达出来。

举个直观例子。假设分析手机市场：

横轴宽度表示：各品牌市场规模
纵轴高度表示：不同产品线占比

最后你会看到一张结构图：

大品牌的列更宽
产品线占比决定每一块的高度
整张图像一面拼接的彩色墙

一眼就能看出谁占市场、谁结构复杂。

在 Highcharts 中实现 Marimekko 图，需要使用 variwide 模块。因为可变宽图本质上是一个“宽度可变的柱状图”。