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

相关推荐
漂流瓶jz6 小时前
总结CSS组件化演进之路:命名规范/CSS Modules/CSS in JS/原子化CSS
前端·javascript·css
steven~~~7 小时前
为什么mq报错
javascript
threelab8 小时前
Three.js 初中数学函数可视化 | 三维可视化 / AI 提示词
开发语言·前端·javascript·人工智能·3d·着色器
凉辰9 小时前
解决 H5 键盘遮挡与页面上推
开发语言·javascript·计算机外设
zz58811 小时前
面试官问"JS的类型"时,到底想听到什么?
javascript
gjwjuejin11 小时前
全埋点技术方案深度剖析:从事件代理到无痕采集的完整实现
javascript
前端若水12 小时前
在 Vue 2 与 Vue 3 中使用 markdown-it-vue 渲染 Markdown 和数学公式
前端·javascript·vue.js
之歆12 小时前
DAY_10 JavaScript 深度解析:原型链 · 引用类型 · 内置对象 · 数组方法全攻略(下)
开发语言·前端·javascript·ecmascript
__log13 小时前
ComfyUI 集成技术方案分析报告
javascript·python·django
ZC跨境爬虫13 小时前
跟着 MDN 学 HTML day_56:(HTML 表格基础完全指南)
前端·javascript·ui·html·音视频