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

相关推荐
香芋芋圆2 小时前
iD-editor 详解|OSM官方在线编辑器,基于D3.js的轻量地图编辑器
开发语言·javascript·编辑器
晗夜未央3 小时前
任务队列反复失败,先分清重试、阻塞和结果待核对
开发语言·javascript
jktantan4 小时前
每个节点 41 字节:把一棵百万节点树拆进 14 个 typed array
前端·javascript·vue.js·算法·typescript
我命由我123455 小时前
访客系统形式(有用户概念、无用户概念)
java·开发语言·前端·javascript·python·产品运营·产品经理
程序员大阳5 小时前
副队长JavaScript教程(65)-详解JSON:轻量级数据交换格式
javascript·json·序列化·反序列化·stringify·parse
paopaokaka_luck7 小时前
基于springboot+vue的益暖微光公益服务平台(DeepSeek公益助手、善款信息追溯、志愿服务积分闭环、ECharts运营分析、活动状态自动流转)
java·前端·javascript·spring boot·mysql·架构·echarts
栀椩7 小时前
Electron 内嵌页面跨域问题(CORS/PNA)解决全记录
前端·javascript·electron
SEO_juper7 小时前
Chrome 扩展一键查看当前页面 SEO 信息:不用切页面,点一下全出来
前端·javascript·chrome
Highcharts.js7 小时前
CSUN 2026|Highcharts无障碍数据与AI分享
javascript·人工智能·数据分析·highcharts·图表开发
系统集成-鹰翔8 小时前
ERP推单数据库怎么备份:SQLite WAL模式下只复制db文件为什么可能漏任务
javascript·数据库·经验分享·后端