技术需求：构建从基础到复杂的反向Highcharts钻取柱状图

我明白你的需求啦——现有示例是从数值分类（比如6、7）钻取到分组（A1、B1），但你需要反过来：主图表展示A1、B1、C1这些顶级分组，点击每个分组后钻取到对应的细分数据（6、7等）。下面我给你整理好完整的实现方案：

1. 调整数据结构 #

首先要把你的原始数据转换成Highcharts钻取需要的格式：

• 主数据（mainData）：每个顶级分组作为一个系列项，包含名称、汇总值（可根据子数据计算总和），以及对应的钻取ID
• 钻取数据（drilldownData）：每个ID对应一个顶级分组，里面存放该分组下的所有细分数据

// 主层级数据：A1、B1、C1作为顶级项，y是该分组的总和，drilldown指向对应的详情ID
const mainData = [
  { 
    name: "A1", 
    y: 33, // 示例数据14+19的总和，可根据实际数据计算
    drilldown: "A1-details" 
  },
  { 
    name: "B1", 
    y: 33, 
    drilldown: "B1-details" 
  },
  { 
    name: "C1", 
    y: 33, 
    drilldown: "C1-details" 
  }
];

// 钻取层级数据：每个ID对应顶级分组，存放细分数据
const drilldownData = [
  {
    id: "A1-details",
    name: "A1 细分数据",
    data: [["6", 14], ["7", 19]]
  },
  {
    id: "B1-details",
    name: "B1 细分数据",
    data: [["6", 14], ["7", 19]]
  },
  {
    id: "C1-details",
    name: "C1 细分数据",
    data: [["6", 14], ["7", 19]]
  }
];

2. 完整的Highcharts配置代码 #

接下来把数据整合到Highcharts实例中，记得加载drilldown模块：

<!-- 引入Highcharts核心和钻取模块 -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>

<div id="container" style="height: 400px; width: 100%;"></div>

<script>
Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: '分组钻取到细分数据'
  },
  xAxis: {
    type: 'category'
  },
  yAxis: {
    title: {
      text: '数值'
    }
  },
  legend: {
    enabled: false
  },
  tooltip: {
    pointFormat: '{point.y}'
  },
  series: [{
    name: '分组汇总',
    colorByPoint: true,
    data: mainData
  }],
  drilldown: {
    series: drilldownData
  }
});
</script>

3. 关键逻辑说明 #

• 主图表：默认显示A1、B1、C1的汇总柱状图，每个柱子都带有钻取触发功能
• 钻取行为：点击任意分组柱子后，会自动切换到该分组对应的细分数据图表（比如点击A1，就显示它的6、7两个子项的数值）
• 返回上一级：钻取后的图表左上角会自动出现返回按钮，点击即可回到主层级

图表效果说明 #

• 主柱状图：展示A1、B1、C1三个分组的汇总数值，每个柱子用不同颜色区分
• 钻取详情图：点击某个分组后，显示该分组下的所有细分项（如6、7）的具体数值，顶部带有返回主图的按钮

内容的提问来源于stack exchange，提问作者Adem Celik