如何创建一个组合的堆叠和分组条形图与chartjs?

o3imoua4  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(177)

我想创建一个如下所示的条形图:

我试着用网站上给出的文档创建一个堆叠条形图。https://www.chartjs.org/docs/latest/samples/bar/stacked.html
但是无法找到按照我要求创建图表的方法。
我试过下面的例子

<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: 'bar',
                                    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,
                                            callbacks:{
                                                mode: 'x',
                                            },
                                        },
                                        scales: {
                                            xAxes: [{
                                                stacked: true,
                                                gridLines: {
                                                    display: false,
                                                }
                                            }],
                                            yAxes: [{
                                                stacked: true,
                                                ticks: {
                                                    beginAtZero: true,
                                                },
                                                type: 'linear',
                                            }]
                                        },
                                        responsive: true,
                                        maintainAspectRatio: false,
                                        legend: { position: 'top' },
                                    }

                                });
                            </script>
iih3973s

iih3973s1#

我认为你可以使用(stacked100插件)https://github.com/y-takey/chartjs-plugin-stacked100,以便堆栈按比例计算100%的缩放尺寸

相关问题