Highcharts 下钻（Drilldown）柱状图 Demo

功能：点击顶层柱状图，可以向下展开查看浏览器各版本细分市场份额，典型上钻‑下钻交互图表

HTML预览代码

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>浏览器市场份额-下钻柱状图</title>
    <!-- 必须额外引入 drilldown 下钻模块 -->
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/drilldown.js"></script>
</head>
<body>
    <div id="container" style="width:100%;height:500px;"></div>

<script>
Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: '浏览器市场份额 · 2022年1月'
    },
    subtitle: {
        text: '点击柱子查看各版本明细。数据来源：<a href="http://statcounter.com" target="_blank">statcounter.com</a>'
    },
    accessibility: {
        announceNewData: {
            enabled: true
        }
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        title: {
            text: '市场占比(%)'
        }
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true,
                format: '{point.y:.1f}%'
            }
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: ' +
            '<b>{point.y:.2f}%</b> 占比<br/>'
    },
    series: [
        {
            name: '浏览器',
            colorByPoint: true,
            data: [
                {
                    name: 'Chrome',
                    y: 63.06,
                    drilldown: 'Chrome'
                },
                {
                    name: 'Safari',
                    y: 19.84,
                    drilldown: 'Safari'
                },
                {
                    name: 'Firefox',
                    y: 4.18,
                    drilldown: 'Firefox'
                },
                {
                    name: 'Edge',
                    y: 4.12,
                    drilldown: 'Edge'
                },
                {
                    name: 'Opera',
                    y: 2.33,
                    drilldown: 'Opera'
                },
                {
                    name: 'IE浏览器',
                    y: 0.45,
                    drilldown: 'Internet Explorer'
                },
                {
                    name: '其他',
                    y: 1.582,
                    drilldown: null
                }
            ]
        }
    ],
    drilldown: {
        breadcrumbs: {
            position: {
                align: 'right'
            }
        },
        series: [
            {
                name: 'Chrome',
                id: 'Chrome',
                data: [
                    ['v65.0',0.1],
                    ['v64.0',1.3],
                    ['v63.0',53.02],
                    ['v62.0',1.4],
                    ['v61.0',0.88],
                    ['v60.0',0.56],
                    ['v59.0',0.45],
                    ['v58.0',0.49],
                    ['v57.0',0.32],
                    ['v56.0',0.29],
                    ['v55.0',0.79],
                    ['v54.0',0.18],
                    ['v51.0',0.13],
                    ['v49.0',2.16],
                    ['v48.0',0.13],
                    ['v47.0',0.11],
                    ['v43.0',0.17],
                    ['v29.0',0.26]
                ]
            },
            {
                name: 'Firefox',
                id: 'Firefox',
                data: [
                    ['v58.0',1.02],
                    ['v57.0',7.36],
                    ['v56.0',0.35],
                    ['v55.0',0.11],
                    ['v54.0',0.1],
                    ['v52.0',0.95],
                    ['v51.0',0.15],
                    ['v50.0',0.1],
                    ['v48.0',0.31],
                    ['v47.0',0.12]
                ]
            },
            {
                name: 'IE浏览器',
                id: 'Internet Explorer',
                data: [
                    ['v11.0',6.2],
                    ['v10.0',0.29],
                    ['v9.0',0.27],
                    ['v8.0',0.47]
                ]
            },
            {
                name: 'Safari',
                id: 'Safari',
                data: [
                    ['v11.0',3.39],
                    ['v10.1',0.96],
                    ['v10.0',0.36],
                    ['v9.1',0.54],
                    ['v9.0',0.13],
                    ['v5.1',0.2]
                ]
            },
            {
                name: 'Edge',
                id: 'Edge',
                data: [
                    ['v16',2.6],
                    ['v15',0.92],
                    ['v14',0.4],
                    ['v13',0.1]
                ]
            },
            {
                name: 'Opera',
                id: 'Opera',
                data: [
                    ['v50.0',0.96],
                    ['v49.0',0.82],
                    ['v12.1',0.14]
                ]
            }
        ]
    }
});
</script>
</body>
</html>

核心参数详细讲解

1、依赖模块

复制代码

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

下钻图表必须额外加载 drilldown 模块，否则点击无反应。

2、顶层数据与下钻绑定字段

复制代码

{
    name: 'Chrome',
    y: 63.06,
    drilldown: 'Chrome'
}

y：顶层展示数值
drilldown：下钻关联ID ，和下方drilldown.series里的id一一对应；
drilldown: null：该柱子禁止下钻（示例‑‑其他）。

3、drilldown 下钻数据集

drilldown.series数组存放每一项点击后展示的子级明细； id必须和顶层drilldown字段的值完全一致，图表才能匹配跳转。

4、breadcrumbs 面包屑导航

复制代码

breadcrumbs: {
    position: { align: 'right' }
}

下钻后图表右上角出现返回顶层的导航按钮，点击即可上钻（返回父级图表）。

5、colorByPoint:true

每个柱子独立分配不同颜色，适合分类占比对比。

业务适用场景

一级行业 → 二级细分行业产值下钻
省份 → 地市人口、GDP下钻
总销量 → 各产品明细销量
大屏看板多层级数据探查

常见踩坑点

忘记引入drilldown.js模块，点击柱子无效果
顶层drilldown字符串和子级id大小写不一致，匹配失败
子级data格式：简写二维数组[['名称',数值]]