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

相关推荐
daols882 小时前
vxe-table 渲染器教程一:实现金额输入控件
javascript·vue.js·vxe-table
触底反弹2 小时前
🔥 React 零基础入门(中):500 行屎山代码到组件化的蜕变
前端·javascript·react.js
张元清6 小时前
React useResizeObserver Hook:追踪元素尺寸变化(2026)
javascript·react.js
瑞瑞小同学9 小时前
处理echarts x轴内容过多,重叠问题
前端·javascript·echarts
像我这样帅的人丶你还10 小时前
MCP + npm:给五年前的老系统接上AI
前端·javascript·agent
一个写前端的11 小时前
基于 Vue 3 的大文件分片上传组件,支持断点续传、并发上传、失败重试等功能
前端·javascript·vue.js
猫头_11 小时前
AI 流式传输工程指南:有了 EventSource 为何还要 Fetch?
javascript·http·llm
良木林12 小时前
滑动窗口 - LeetCode hot 100
javascript·算法·leetcode·双指针·滑动窗口
不简说14 小时前
# JS 代码技巧 vol.7 — 20 个浏览器 API 实战,自带 API 能干的事别自己封装
前端·javascript·面试
Hilaku14 小时前
为什么 Cloudflare 能做到毫秒级冷启动,而其它云厂商却不行?
前端·javascript·程序员