如何使用Chart.js 3.8.0 创建堆积条形图？

本文链接：https://blog.youkuaiyun.com/allway2/article/details/125599614

本文介绍如何使用Chart.js创建垂直堆叠条形图，包括如何设置数据集和选项来实现不同需求的堆叠效果。通过示例代码展示了如何创建包含不同数量项目的堆叠条形图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在我们之前的文章中，我们详细了解了使用 Chart.js 创建多折线图。现在在本文中，我们将讨论 Chart Js 的另一个显着特性，即我们如何 使用 chart.js 创建一个垂直堆叠的条形图。

堆积条形图是一种非常重要且有用的图表，它使用条形来显示不同类型数据之间的比较，但能够分解和比较整个数据的各个部分。图表中的每个条形代表一个整体或完整，条形中的部分代表总数据的不同部分。

堆叠条形图堆叠中具有不同值的示例

简单地说，我创建了一个 HTML 页面并将最新的图表 js CDN 引用添加到我们的 Html 页面。在我们的页面上，我们有一个用于创建堆叠条形图的 Canvas 元素。

最近我正在做一个项目，我们需要为此创建一个堆叠条形图，我正在寻找一个优秀且免费的开源库。然后遇到 Chart.js。我们正在将我们的图表从付费图表库更改为开源 chart.js，因为我们知道我们也可以使用图表 js 离线模式并响应窗口大小的变化。

我一直在阅读有关文档，在所有示例中，我注意到对于堆叠条形图，条形图中的每个条形的项目数都是相同的。

但是我们的要求不同，我不知道如何制作如下图示例2的堆叠条形图。经过一番头脑风暴，我找到了解决方案，我将在本文中分享。因此，在本文中，我们将为您提供两个示例。

在我们的第一个示例中，我们将创建一个堆叠条形图，就像谷歌分析一样，如下图所示，我们将创建一个访问者条形图，其中包含来自各种来源（如有机搜索、社交媒体搜索、付费搜索）的包含值。

假设我们被要求创建一个条形图来说明您网站的访问者。具体来说，您应该显示来自以下四个来源的访问者的数量，即来自广告活动的自然极好、社交极好、推荐极好和付费极好。

我们需要显示有多少用户来自 Organic terrific，有多少来自另一个渠道。我们可以将信息组合成堆积条形图。

<!DOCTYPE html>
<html>
    <head>
        <title>Create stacked bar chart using chart.js</title>
        <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
    </head>
    <body>
        <div style="margin-left:5%;margin-right:5%">
            <canvas id="StackedbarChartcanvas" style="width:80%"></canvas>
        </div>
        <script>
            var StackedbarChart = {
                labels: [
                    "Jan",
                    "Feb",
                    "Mar",
                    "Apr",
                    "May",
                    "June",
                    "July",
                    "Aug",
                    "Sep",
                    "Oct"
                ],
                datasets: [
                    {
                        label: "Organic terrific",
                        backgroundColor: "red",
                        borderColor: "red",
                        borderWidth: 1,
                        data: [42, 56, 26, 52, 66, 87, 51, 42, 32, 88]
                    },
                    {
                        label: "Soical terrific",
                        backgroundColor: "blue",
                        borderColor: "blue",
                        borderWidth: 1,
                        data: [120, 52, 69, 62, 12, 45, 110, 52, 39, 75]
                    },
                    {
                        label: "Referral terrific",
                        backgroundColor: "green",
                        borderColor: "green",
                        borderWidth: 1,
                        data: [45, 12, 78, 23, 87, 92, 63, 47, 29, 79]
                    },
                    {
                        label: "Paid terrific",
                        backgroundColor: "lightblue",
                        borderColor: "lightblue",
                        borderWidth: 1,
                        data: [45, 88, 112, 41, 48, 69, 52, 61, 59, 69]
                    }
                ]
            };

            var StackedbarChartOptions = {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'right', //this option is used for place legend on the right side of bar chart
                    }
                },
                scales: {
                    x: {
                        stacked: true, // this option is used to make the bars stacked
                    },
                    y: {
                        stacked: true
                    }
                },
                title: {
                    display: true,
                    text: "Chart.js Stacked Bar Chart"
                }
            }

            window.onload = function () {
                var chartData = {
                    type: "bar",
                    data: StackedbarChart,
                    options: StackedbarChartOptions
                }
                new Chart("StackedbarChartcanvas", chartData);
            };

        </script>

    </body>
</html>

带有 chart.js 的垂直堆积条形图

在此示例中，我们将使用 chart.js 创建一个垂直堆叠的条形图，每个条形中都有不同的项目，如下图所示。我想 在网站上显示每日用户总数的条形图，该条形图应包含 来自所有来源的访问者的信息。

<!DOCTYPE html>
<html>
    <head>
        <title>Create stacked bar chart with different item in each bar using chart.js</title>
        <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
    </head>
    <body>
        <div style="margin-left:5%;margin-right:5%">
            <canvas id="StackedbarChartcanvas" style="width:80%"></canvas>
        </div>
        <script>
            var StackedbarChart = {
                labels: [
                    "Jan",
                    "Feb",
                    "Mar",
                    "Apr",
                    "May",
                    "June",
                    "July",
                    "Aug",
                    "Sep",
                    "Oct"
                ],
                datasets: [
                    {
                        label: "Organic terrific",
                        backgroundColor: "red",
                        borderColor: "red",
                        borderWidth: 1,
                        data: [42, 56, 0, 52, 66, 87, 51, 42, 32, 88]
                    },
                    {
                        label: "Soical terrific",
                        backgroundColor: "blue",
                        borderColor: "blue",
                        borderWidth: 1,
                        data: [0, 52, 94, 62, 12, 45, 110, 52, 39, 75]
                    },
                    {
                        label: "Referral terrific",
                        backgroundColor: "green",
                        borderColor: "green",
                        borderWidth: 1,
                        data: [0, 12, 0, 23, 87, 92, 63, 47, 29, 79]
                    },
                    {
                        label: "Paid terrific",
                        backgroundColor: "lightblue",
                        borderColor: "lightblue",
                        borderWidth: 1,
                        data: [45, 88, 0, 41, 48, 69, 52, 61, 59, 69]
                    }
                ]
            };

            var StackedbarChartOptions = {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top', //this option is used for place legend on the right side of bar chart
                    }
                },
                scales: {
                    x: {
                        stacked: true, // this option is used to make the bars stacked
                    },
                    y: {
                        stacked: true
                    }
                },
                title: {
                    display: true,
                    text: "Chart.js Stacked Bar Chart"
                }
            }

            window.onload = function () {
                var chartData = {
                    type: "bar",
                    data: StackedbarChart,
                    options: StackedbarChartOptions
                }
                new Chart("StackedbarChartcanvas", chartData);
            };

        </script>

    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Create stacked bar chart with different item in each bar using chart.js</title>
        <script src="chart.min.js"></script>
    </head>
    <body>
        <div style="margin-left:5%;margin-right:5%">
            <canvas id="StackedbarChartcanvas" style="width:80%"></canvas>
        </div>
        <script>
            new Chart("StackedbarChartcanvas", {type: "bar",
                data: {
                    labels: ["2021-07", "2021-08", "2021-09", "2021-10", "2021-11", "2021-12", "2022-01", "2022-02", "2022-03", "2022-04", "2022-05", "2022-06", "2022-07"],
                    datasets: [{
                            label: '连接时间（毫秒）',
                            backgroundColor: 'rgb(255, 99, 132)',
                            borderColor: 'rgb(255, 99, 132)',
                            borderWidth: 1,
                            data: ["318", "324", "330", "349", "360", "368", "376", "382", "389", "395", "398", "402", "403"]
                        },
                        {
                            label: '读取时间（毫秒）',
                            backgroundColor: 'rgb(54, 162, 235)',
                            borderColor: 'rgb(54, 162, 235)',
                            borderWidth: 1,
                            data: ["436", "439", "463", "470", "538", "540", "540", "541", "633", "633", "633", "634", "634"]
                        }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'top', //this option is used for place legend on the right side of bar chart
                        }, title: {
                            display: true,
                            text: "Chart.js Stacked Bar Chart"
                        }
                    },
                    scales: {
                        x: {
                            stacked: true, // this option is used to make the bars stacked
                        },
                        y: {
                            stacked: true
                        }
                    }

                }
            });


        </script>

    </body>
</html>