Highcharts调用addSingleSeriesAsDrilldown报错 异步钻取堆叠柱图问题排查

报错信息 #

Uncaught TypeError: chart.addSingleSeriesAsDrilldown is not a function
at Object.success

核心错误点 #

• this指向错误：在$.ajax的success回调里直接写var chart = this，此时this指向ajax请求对象，不是Highcharts图表实例，自然找不到实例上的钻取方法。
• 钻取数据键名写错：构建drilldowns4、drilldowns6时，键写死为字符串pointName，没有用实际点击的点位名称e.point.name作为键，后续取系列值时会拿到undefined。
• 前置依赖缺失：如果前两个问题修复后仍报错，检查是否引入了drilldown模块，该方法是drilldown模块挂载到实例上的，主库不自带。
• 配置结构错误：原代码把图表类型、事件、边距等属于chart字段的配置直接放在了配置最外层，会导致配置不生效。

修复步骤 #

1. 先确认依赖引入顺序正确：

<script src="path/to/highcharts.js"></script>
<script src="path/to/modules/drilldown.js"></script>

2. 修正钻取事件逻辑，提前保存图表实例，修正数据结构和配置层级，参考代码如下：

function loadProvinceStackedChart() {
    var dataSeries = [];    
    var drill_level = 0;                                 
    var chartConfig = {
        chart: {
            type: 'column',
            marginBottom: 120,
            events: {
                drilldown: function (e) {
                    // 在ajax外层提前保存图表实例，避免回调内this指向偏移
                    const chart = this;
                    const pointName = e.point.name;
                    // 已经加载过钻取数据直接返回，避免重复请求
                    if (e.seriesOptions) return;

                    $.ajax({
                        url: 'api/getDistrictData/'+ pointName,
                        type: 'GET',
                        success: function (data) {
                            var labuploadedData = [];
                            var labPndingData =[];
                            $.each(data, function(key, item){
                                labuploadedData.push({  
                                    name: item.district_Name,
                                    y: item.labUploaded,
                                    drilldown: false
                                });
                                labPndingData.push({
                                    name: item.district_Name,
                                    y: item.pending,
                                    drilldown: false
                                });
                            });

                            // 直接构建钻取系列，不需要额外套一层用点名为key的对象，避免键名匹配错误
                            const uploadedSeries = {
                                name: 'Uploaded',
                                color: '#228B22',
                                data: labuploadedData
                            };
                            const pendingSeries = {
                                name: 'Pending',
                                color: '#FF0000',
                                data: labPndingData
                            };
                            
                            chart.addSingleSeriesAsDrilldown(e.point, uploadedSeries);
                            chart.addSingleSeriesAsDrilldown(e.point, pendingSeries);
                            chart.applyDrilldown();
                        }      
                    });                    
                }
            }
        },
        // 补充堆叠配置，否则柱状图不会按堆叠效果显示
        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },
        // 原有title、xAxis、yAxis、初始series、drilldown配置等其他内容补在这里
    };
    // 初始化图表，传入图表容器的ID和完整配置
    Highcharts.chart('yourChartContainerId', chartConfig);
}

补充说明 #

• 钻取后的返回按钮由drilldown模块自动生成，不需要额外写逻辑控制。
• 如果需要做多级钻取，只要给下一级的点位设置drilldown: true，重复上述异步取数逻辑即可。

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