如何创建带Drilldown的Highcharts Pareto图？帕累托线不显示求助

你的问题核心是：初始帕累托系列只绑定了第一级的列系列，钻取后加载的子级列系列没有关联对应的帕累托线。Highcharts不会自动为钻取后的系列生成帕累托线，需要手动通过钻取事件来动态创建和管理帕累托系列。

解决思路 #

• 监听drilldown事件：当用户钻取到子级数据时，根据当前激活的列系列，动态创建一个新的帕累托系列并添加到图表中。
• 监听drillup事件：当用户返回上级图表时，移除钻取时创建的临时帕累托系列，恢复初始的帕累托线。

修改后的完整代码示例 #

Highcharts.chart('container', {
    yAxis: [{
        title: { text: '数量' }
    }, {
        title: { text: '累计占比' },
        opposite: true,
        max: 100
    }],
    series: [
        {
            type: 'pareto',
            name: '帕累托',
            yAxis: 1,
            zIndex: 10,
            color: 'orange',
            baseSeries: 1,
            tooltip: {
                valueDecimals: 2,
                valueSuffix: '%'
            }
        }, 
        {
            name: '主分类',
            type: 'column',
            data: [
                <?php foreach($Example1 as $m => $a): ?>
                {
                    name: '<?php echo $m ?>',
                    y: <?php echo $a['Qty'] ?>,
                    drilldown: '<?php echo $m ?>'
                },
                <?php endforeach ?>
            ],
            dataLabels: {
                enabled: true,
                color: '#FFFFFF',
                align: 'center',
                format: '{point.y}',
                style: {
                    fontSize: '15px'
                }
            }
        }
    ],
    drilldown: {
        series: [
            <?php foreach ($Example1 as $m => $a): ?>
            {
                name: '<?php echo $m ?>',
                id: '<?php echo $m ?>',
                data: [
                    <?php foreach ($Example2 as $r): ?>
                    <?php if ($r['Example'] == $m): ?>
                    ['<?php echo $r['ExampleExample'] ?>', <?php echo $r['Qty'] ?>],
                    <?php endif ?>
                    <?php endforeach ?>
                ]
            },
            <?php endforeach ?>
        ]
    },
    chart: {
        events: {
            drilldown: function(e) {
                // 移除已存在的临时帕累托系列
                if (this.get('drilldown-pareto')) {
                    this.get('drilldown-pareto').remove();
                }
                // 基于当前钻取的列系列创建新帕累托线
                this.addSeries({
                    id: 'drilldown-pareto',
                    type: 'pareto',
                    name: '帕累托',
                    yAxis: 1,
                    zIndex: 10,
                    color: 'orange',
                    baseSeries: e.seriesOptions.id,
                    tooltip: {
                        valueDecimals: 2,
                        valueSuffix: '%'
                    }
                });
            },
            drillup: function() {
                // 返回上级时清理临时帕累托系列
                if (this.get('drilldown-pareto')) {
                    this.get('drilldown-pareto').remove();
                }
            }
        }
    }
});

关键说明 #

• 给钻取时创建的帕累托系列设置唯一id（如drilldown-pareto），方便后续精准移除。
• 钻取时必须让baseSeries指向当前子级列系列的id，确保帕累托线基于子级数据计算。
• 钻取返回时清理临时系列，避免和初始帕累托系列冲突。

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