如何使用Chart.js创建堆叠与分组组合的柱状图？

你想要的目标图表是横向堆叠柱状图，当前代码使用默认纵向柱状图类型，调整以下几点即可实现需求：

修改后的完整代码 #

<canvas id="myChart" style="vertical-align:left;z-index:1; height: 350px"> </canvas>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script>
    var ctx = document.getElementById("myChart").getContext("2d");
    var myBarChart = new Chart(ctx, {
        type: 'horizontalBar', // 切换为横向柱状图类型
        data: {
            labels: ['T1', 'T2', 'T3', 'T4'],
            datasets: [{
                label: 'Done',
                backgroundColor: "#caf270",
                data: [12, 59, 5, 56],
            }, {
                label: 'Running',
                backgroundColor: "#45c490",
                data: [12, 59, 5, 56],
            }, {
                label: 'Todo',
                backgroundColor: "#008d93",
                data: [12, 59, 5, 56],
            }, {
                label: 'KO',
                backgroundColor: "#2e5468",
                data: [12, 59, 5, 56],
            }],
        },
        options: {
            tooltips: {
                displayColors: true,
                mode: 'index', // 确保tooltip显示堆叠的所有数据项
                intersect: false
            },
            scales: {
                xAxes: [{
                    stacked: true,
                    gridLines: {
                        display: false,
                    },
                    ticks: {
                        beginAtZero: true
                    }
                }],
                yAxes: [{
                    stacked: true,
                    gridLines: {
                        display: false,
                    }
                }]
            },
            responsive: true,
            maintainAspectRatio: false,
            legend: { position: 'top' },
        }
    });
</script>

关键调整说明 #

1. 图表类型切换：将type从bar改为horizontalBar，这是实现横向布局的核心
2. Tooltip优化：设置mode: 'index'和intersect: false，保证鼠标悬停时能完整展示该堆叠柱的所有分段数据
3. 坐标轴配置：保持x、y轴的stacked: true，确保柱子按堆叠方式排列，同时隐藏网格线匹配目标样式

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