如何修改Highcharts堆叠柱状图图例为显示X轴制造商名称

要实现将图例从型号（如示例中的BPL、FA Cup）替换为X轴的制造商/球队名称，有两种可行方案，根据你的需求选择：

方案1：重构数据结构（推荐，最简单） #

这种方法调整数据组织方式，把每个制造商/球队作为独立的series，X轴改为型号/奖杯类型，这样图例自然会显示制造商名称，同时保持堆叠效果：

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Major trophies for some English teams',
        align: 'left'
    },
    xAxis: {
        categories: ['BPL', 'FA Cup', 'CL'] // X轴改为型号
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Count trophies'
        },
        stackLabels: {
            enabled: true
        }
    },
    legend: {
        align: 'left',
        x: 70,
        verticalAlign: 'top',
        y: 70,
        floating: true,
        backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || 'white',
        borderColor: '#CCC',
        borderWidth: 1,
        shadow: false
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true
            }
        }
    },
    series: [{
        name: 'Arsenal',
        data: [3, 14, 0]
    }, {
        name: 'Chelsea',
        data: [5, 8, 2]
    }, {
        name: 'Liverpool',
        data: [1, 8, 6]
    }, {
        name: 'Manchester United',
        data: [13, 12, 3]
    }]
});

方案2：自定义图例（保持原有X轴结构） #

如果必须保留X轴为制造商名称，可通过隐藏默认图例，手动绘制自定义图例并绑定事件来控制对应制造商的堆叠柱显示/隐藏：

Highcharts.chart('container', {
    chart: {
        type: 'column',
        events: {
            load: function() {
                const chart = this;
                const teams = chart.xAxis[0].categories;
                const legendWidth = 150;
                const legendItemHeight = 20;
                const startX = 70;
                const startY = 70;
                const spacing = 5;

                teams.forEach((team, index) => {
                    // 获取对应球队的颜色
                    const color = Highcharts.getOptions().colors[index];
                    const itemTop = startY + index * (legendItemHeight + spacing);

                    // 绘制图例背景框
                    const bgBox = chart.renderer.rect(
                        startX, itemTop, legendWidth, legendItemHeight, 3
                    ).attr({
                        fill: 'white',
                        stroke: '#CCC',
                        strokeWidth: 1,
                        zIndex: 9
                    }).add();

                    // 绘制颜色标记
                    const colorMark = chart.renderer.rect(
                        startX + 5, itemTop + 3, 14, 14, 2
                    ).attr({
                        fill: color,
                        zIndex: 10
                    }).add();

                    // 绘制球队名称文本
                    const text = chart.renderer.text(
                        team, startX + 25, itemTop + 15
                    ).attr({
                        zIndex: 10,
                        color: '#333'
                    }).add();

                    // 收集该球队的所有数据点
                    const teamPoints = chart.series.flatMap(series => 
                        series.points.filter(point => point.category === team)
                    );

                    // 绘制可点击区域
                    chart.renderer.rect(
                        startX, itemTop, legendWidth, legendItemHeight
                    ).attr({
                        fill: 'rgba(0,0,0,0)',
                        zIndex: 11,
                        cursor: 'pointer'
                    }).on('click', () => {
                        const isVisible = teamPoints[0].visible !== false;
                        
                        // 更新图例样式
                        colorMark.attr({ fill: isVisible ? '#e0e0e0' : color });
                        text.attr({ color: isVisible ? '#999' : '#333' });
                        
                        // 切换所有对应点的显示状态
                        teamPoints.forEach(point => point.setVisible(!isVisible, false));
                        chart.redraw();
                    }).add();
                });
            }
        }
    },
    title: {
        text: 'Major trophies for some English teams',
        align: 'left'
    },
    xAxis: {
        categories: ['Arsenal', 'Chelsea', 'Liverpool', 'Manchester United']
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Count trophies'
        },
        stackLabels: {
            enabled: true
        }
    },
    legend: {
        enabled: false // 隐藏默认图例
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true
            }
        }
    },
    series: [{
        name: 'BPL',
        data: [3, 5, 1, 13]
    }, {
        name: 'FA Cup',
        data: [14, 8, 8, 12]
    }, {
        name: 'CL',
        data: [0, 2, 6, 3]
    }]
});

说明 #

• 方案1无需自定义代码，完全利用Highcharts原生功能，维护成本低，适合可以调整X轴展示内容的场景。
• 方案2保留原有图表结构，通过Highcharts的Renderer API手动构建交互图例，适合必须保持X轴为制造商名称的场景。

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