异常教程

Highcharts 树状图(Treemap)（一文讲透）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

树状图(Treemap) 的基本概念与价值

在数据可视化领域，树状图(Treemap) 是一种通过嵌套矩形展示层次化数据结构的图表类型。它通过面积和颜色两个维度，直观地呈现数据的层级关系和数值比例。与传统的饼图或条形图相比，树状图在展示复杂层级结构时具有显著优势，尤其适合处理多维度、多层级的数据集。

树状图的典型应用场景

  • 预算分配分析：例如公司各部门预算的占比与细分
  • 电商销售数据：按品类、子品类展示销售额分布
  • 资源使用监控：服务器磁盘空间占用的层级化展示
  • 投资组合管理：不同资产类别、子类别的资金分配比例

想象一个俄罗斯套娃的结构：最大的矩形代表总数据，内部嵌套的小矩形代表子层级，每个子矩形的面积对应其数值占比。这种可视化方式让读者在几秒内就能抓住数据的核心逻辑。

Highcharts 树状图(Treemap) 的配置基础

Highcharts 是一款功能强大的开源图表库，其对树状图的支持通过 series.type: 'treemap' 实现。以下是快速上手所需的配置步骤：

步骤1：引入 Highcharts 核心库及树状图模块

在 HTML 文件中，需加载 Highcharts 的基础库以及 highcharts-treemap 模块：

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>

步骤2：准备数据结构

树状图的数据需以嵌套的 JSON 对象表示层级关系。每个节点包含以下关键属性：

  • name：节点名称
  • value：数值，用于决定矩形面积
  • children：子节点数组（可选）

示例数据结构：

const data = [
  {
    name: "总部门",
    value: 1000,
    children: [
      {
        name: "市场部",
        value: 400,
        children: [
          { name: "线上推广", value: 200 },
          { name: "线下活动", value: 200 }
        ]
      },
      {
        name: "技术部",
        value: 600,
        children: [
          { name: "前端开发", value: 300 },
          { name: "后端开发", value: 300 }
        ]
      }
    ]
  }
];

步骤3：初始化图表配置

通过 Highcharts.chart() 方法创建图表，核心配置项包括：

Highcharts.chart('container', {
  series: [{
    type: 'treemap',
    layoutAlgorithm: 'squarified', // 布局算法
    data: data // 数据源
  }],
  title: {
    text: '公司部门预算分配'
  },
  tooltip: {
    pointFormat: '部门: {point.name}<br>预算: {point.value}万'
  }
});

树状图(Treemap) 的核心配置项详解

1. 布局算法选择

Highcharts 提供了多种布局算法，直接影响矩形的排列方式：
| 算法名称 | 特点描述 |
|------------------|--------------------------------------------------------------------------|
| squarified | 优先生成接近正方形的矩形，视觉上更协调（默认算法） |
| strip | 按行或列堆叠矩形，适合展示时间序列数据 |
| sliceAndDice | 通过水平或垂直切割生成矩形，层级关系更清晰 |

2. 颜色映射与样式

通过 colorAxis 和 dataLabels 实现数据驱动的视觉编码：

colorAxis: {
  minColor: '#ffffff', // 最小值颜色
  maxColor: '#008800'  // 最大值颜色
},
dataLabels: {
  enabled: true,
  format: '{point.name}\n{point.value}万' // 显示名称和数值
}

3. 交互功能增强

添加点击事件实现层级钻取：

plotOptions: {
  treemap: {
    point: {
      events: {
        click: function () {
          if (this.children) {
            // 展示子层级
            Highcharts.chart('container', {
              series: [{ data: this.children }]
            });
          }
        }
      }
    }
  }
}

实战案例：电商销售数据可视化

案例背景

某电商平台需展示年度销售额分布，数据包含：

  • 一级分类：电子产品、服饰、家居
  • 二级分类：如电子产品下含手机、笔记本、平板

完整代码实现

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/treemap.js"></script>
</head>
<body>
  <div id="sales-chart" style="width:100%; height:600px;"></div>
  <script>
    const salesData = [
      {
        name: "总销售额",
        value: 12000,
        children: [
          {
            name: "电子产品",
            value: 6500,
            children: [
              { name: "手机", value: 3000 },
              { name: "笔记本", value: 2500 },
              { name: "平板", value: 1000 }
            ]
          },
          {
            name: "服饰",
            value: 3500,
            children: [
              { name: "男装", value: 1800 },
              { name: "女装", value: 1700 }
            ]
          },
          {
            name: "家居",
            value: 2000,
            children: [
              { name: "家具", value: 1200 },
              { name: "灯具", value: 800 }
            ]
          }
        ]
      }
    ];

    Highcharts.chart('sales-chart', {
      title: { text: '电商平台年度销售额分布' },
      series: [{
        type: 'treemap',
        layoutAlgorithm: 'squarified',
        data: salesData,
        allowDrillToNode: true,
        dataLabels: {
          enabled: true,
          format: '{point.name}\n{point.value}万元'
        },
        colorAxis: {
          minColor: '#ffedce',
          maxColor: '#ff0000',
          stops: [[0, '#ffffe5'], [1, '#ff0000']]
        }
      }],
      tooltip: {
        pointFormat: '分类: {point.name}<br>销售额: {point.value}万元'
      }
    });
  </script>
</body>
</html>

代码解析

  • 颜色渐变设计：通过 colorAxis.stops 定义红黄渐变，直观区分销售额高低
  • 层级交互：allowDrillToNode 允许用户单击父节点展开子层级
  • 布局优化：squarified 算法确保矩形形状接近正方形，减少狭长区域

进阶技巧与性能优化

1. 动态数据加载

通过 AJAX 获取数据并动态渲染：

fetch('sales-data.json')
  .then(response => response.json())
  .then(data => {
    Highcharts.chart('container', { series: [{ data }] });
  });

2. 响应式设计

使用 responsive 配置项适配不同屏幕尺寸：

responsive: {
  rules: [{
    condition: {
      maxWidth: 768
    },
    chartOptions: {
      title: { style: { fontSize: '18px' } },
      dataLabels: { format: '{point.name}' }
    }
  }]
}

3. 性能优化

  • 数据压缩：对超大规模数据（如>1000节点）使用 drilldown 模块分层加载
  • 虚拟渲染：通过 boost 模块加速复杂图表的渲染
  • 缓存策略：将静态配置缓存至本地存储，减少重复计算

常见问题与解决方案

Q1：如何调整矩形的最小尺寸？

通过 minSize 和 maxSize 控制：

plotOptions: {
  treemap: {
    layoutAlgorithm: {
      squares: {
        minSize: 10 // 矩形最小宽度/高度
      }
    }
  }
}

Q2：如何自定义颜色映射逻辑？

使用 colorKey 指定非数值字段：

colorAxis: {
  keys: ['customColorField'], // 数据中需包含对应字段
  type: 'linear'
}

Q3：如何导出高分辨率图表？

调用 chart.exportChart() 并设置 scale 参数：

chart.exportChart({
  type: 'png',
  scale: 2 // 2倍分辨率
});

总结与展望

Highcharts 树状图(Treemap) 通过直观的视觉编码，为复杂数据提供了高效的展示方案。本文从基础概念、配置细节到实战案例，逐步揭示了该图表类型的实现逻辑。对于开发者而言，掌握树状图不仅能提升数据表达能力，更能通过交互设计和性能优化实现专业级的数据可视化应用。

随着数据量的持续增长，树状图在资源管理、金融分析等领域的应用场景将更加广泛。建议读者结合业务需求，深入探索 Highcharts 的高级功能（如 treemapLayout 自定义算法），进一步释放树状图的潜力。

最新发布

查看更多文章