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

相关推荐
Larcher3 小时前
React Router 不只是页面跳转:从 SPA 路由到权限守卫的完整实践
javascript·后端
Larcher4 小时前
大模型为什么每次回答都不一样?一文搞懂 Temperature、Top K 与 Top P
javascript·后端
eric-sjq7 小时前
10 分钟实战:用 0.6B 本地模型生成中文网页(WanlyFrontend + 编译器全流程)
javascript·机器学习·自然语言处理·html
To_OC8 小时前
LC 438 找到所有字母异位词:暴力超时后,我靠滑动窗口一招搞定
javascript·算法·leetcode
kyriewen8 小时前
面试官问"这段逻辑为什么这样写"——我才发现,这半年我写的代码,我自己都解释不了
前端·javascript·面试
一壶浊酒..9 小时前
Scrape Webpack练习
开发语言·javascript·webpack
默_笙12 小时前
⛵ 我用 React + TS 做了个"调色盘",顺便学会了企业级项目的目录架构
前端·javascript
渣波13 小时前
拒绝 Redux 样板代码:Zustand 核心原理与实战进阶指南(基础、异步与切片模式)
前端·javascript
C++、Java和Python的菜鸟13 小时前
第12章 前端Web进阶(Vue工程化+ElementPlus)
前端·javascript·vue.js
妙码生花14 小时前
让各大 AI 整理出来的前端工程命名最简实践(Vue + TS)
前端·javascript·vue.js