如何使用Chart.js将3个不同颜色的数据集展示在同一根柱状条上

Chart.js v1 堆叠柱状图实现方案 #

你原代码存在两处可直接优化的问题：一是重复对同一个canvas元素初始化图表实例，二是第二次初始化时用到的config变量未定义。以下是满足你需求的完整实现代码：

var ctx = document.getElementById("myChart").getContext("2d");

// 先计算每个分类的总和，用于底部展示
var labels = ["Chocolate", "Vanilla", "Strawberry"];
var datasetList = [
    {
        label: "Blue",
        backgroundColor: "blue",
        data: [3, 7, 4]
    },
    {
        label: "Red",
        backgroundColor: "red",
        data: [4, 3, 5]
    },
    {
        label: "Green",
        backgroundColor: "green",
        data: [7, 2, 6]
    }
];
// 计算各分类总和
var totalValues = [];
for (var i = 0; i < labels.length; i++) {
    var sum = 0;
    for (var j = 0; j < datasetList.length; j++) {
        sum += datasetList[j].data[i];
    }
    totalValues.push(sum);
}

var data = {
    labels: labels,
    datasets: datasetList
};

var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        barValueSpacing: 20,
        scales: {
            xAxes: [{
                stacked: true // 开启x轴堆叠，让同分类的柱合并
            }],
            yAxes: [{
                stacked: true, // 开启y轴堆叠，按数值大小分配区块占比
                ticks: {
                    min: 0,
                }
            }]
        },
        animation: {
            onComplete: function() {
                // 动画完成后在柱底渲染总和
                var chartInstance = this.chart;
                var ctx = chartInstance.ctx;
                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                ctx.textAlign = 'center';
                ctx.textBaseline = 'bottom';

                this.data.labels.forEach(function(label, index) {
                    var meta = chartInstance.controller.getDatasetMeta(0);
                    var posX = meta.data[index]._model.x;
                    // 总和展示在x轴上方、柱底部位置
                    ctx.fillText(totalValues[index], posX, chartInstance.scales['y-axis-0'].bottom - 5);
                });
            }
        }
    }
});

实现效果说明 #

• 同分类下的三个数据集会自动堆叠到同一根柱内，不同数据集对应你设置的背景色，区块高度和对应数值占比完全匹配
• 每根柱状条的底部会展示该分类三个数值的总和
• 鼠标悬停到柱状条上时，默认tooltip会自动弹出三类数据的具体数值

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