Highcharts堆叠条形图逻辑不符需求，需实现主题文章状态分布图表

嘿，我来帮你搞定这两个问题！针对你遇到的Highcharts堆叠条形图逻辑反了的问题，还有多主题文章状态分布的展示需求，我整理了具体的解决方案和可直接用的代码：

1. 解决堆叠条形图逻辑相反的问题 #

默认情况下，Highcharts的堆叠条形图会按照你定义系列的顺序从下往上堆叠。如果和你的需求相反，有两种简单的调整方式：

• 调整系列定义顺序：把你希望显示在最底部的系列放在代码的第一个位置，最顶部的放在最后一个
• 反转Y轴：通过yAxis.reversed: true翻转堆叠方向，但这会同时反转Y轴的刻度顺序，适合需要反向展示的场景

2. 多主题文章状态分布的堆叠条形图实现 #

堆叠条形图完全符合你的需求——不用做一堆饼图，就能清晰对比所有主题的文章状态分布。下面是完整的可运行代码，已经处理了堆叠顺序的问题：

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: '各主题文章状态分布'
    },
    xAxis: {
        categories: ['Topic 1', 'Topic 2', 'Topic 3', 'Topic 4', 'Topic 5'],
        title: {
            text: '博客主题'
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: '文章数量',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        }
        // 如需反转堆叠方向，取消下面注释
        // reversed: true
    },
    tooltip: {
        valueSuffix: ' 篇'
    },
    plotOptions: {
        bar: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            }
        }
    },
    legend: {
        reversed: false, // 图例顺序和堆叠顺序保持一致
        align: 'right',
        x: -30,
        verticalAlign: 'top',
        y: 25,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
        borderColor: '#CCC',
        borderWidth: 1,
        shadow: false
    },
    series: [{
        name: 'draft（草稿）',
        data: [5, 3, 4, 7, 2]
    }, {
        name: 'to be validated（待审核）',
        data: [2, 2, 3, 2, 1]
    }, {
        name: 'published（已发布）',
        data: [3, 4, 4, 2, 5]
    }]
});

代码关键说明 #

• 我把draft系列放在最前面，这样它会堆叠在每个主题条形的最底部，符合「草稿→待审核→已发布」的常规流程；如果需要反转堆叠顺序，只需要调整三个series的定义顺序即可
• plotOptions.bar.stacking: 'normal'是开启堆叠模式的核心配置
• 启用了dataLabels可以直接看到每个状态的具体文章数量，提升可读性

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