在 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 模块。因为可变宽图本质上是一个"宽度可变的柱状图"。

相关推荐
Mh7 分钟前
我决定写一个 3D 地球仪来记录下我要去的地方
前端·javascript·动效
. . . . .2 小时前
ref、useRef 和 forwardRef
前端·javascript·react.js
柚子8162 小时前
break跳出语句块的神奇技巧
前端·javascript
ejinxian3 小时前
Rust GUI框架Azul与Electron、WebView2
前端·javascript·electron
代码不加糖5 小时前
0基础搭建前后端分离项目:实现菜单与界面左右布局
java·前端·javascript·mysql·elementui·mybatis
zhensherlock5 小时前
Protocol Launcher 系列:Tally 快速计数器的深度集成
前端·javascript·typescript·node.js·自动化·github·js
AC赳赳老秦5 小时前
OpenClaw权限管理实操:团队共享Agent,设置操作权限,保障数据安全
服务器·开发语言·前端·javascript·excel·deepseek·openclaw
光影少年6 小时前
Polyline 组件如何绘制渐变区域?
前端·javascript·掘金·金石计划
普通网友6 小时前
JavaScript:ESLint+Prettier 规范代码格式
开发语言·javascript·ecmascript
jiayong236 小时前
第 38 课:任务列表里高亮当前正在查看详情的任务
开发语言·前端·javascript·vue.js·学习