Javascript 如何使用angular-chart.js[duplicated]创建一组StackedBar

Javascript 如何使用angular-chart.js[duplicated]创建一组StackedBar,javascript,angularjs,angular-chart,Javascript,Angularjs,Angular Chart,我正在使用angular-chart.js,但我发现在创建一组StackedBar时遇到了问题,如下所示: 以下是我的代码: $scope.labels = []; $scope.labels = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juil

我正在使用angular-chart.js,但我发现在创建一组StackedBar时遇到了问题,如下所示:

以下是我的代码:

$scope.labels = [];
            $scope.labels = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
             "Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Décembre"];
            $scope.type = "StackedBar";
            $scope.series = ['Series A', 'Series B'];
            $scope.options = {
                scales: {
                    xAxes: [{
                        stacked: true,
                        ticks : {
                            beginAtZero: true
                        }
                    }],
                    yAxes: [{
                        stacked: false,
                        ticks : {
                            beginAtZero: true
                        }
                    }]
                }
            };
            $scope.data = [
                [65, 59, 90, 81, 56, 55, 40],
                [28, 48, 40, 19, 96, 27, 100]
            ];
            $scope.colors = [];
            $scope.colors = ['#00ADF9'];
对于html代码:

<canvas class="chart chart-bar" chart-type="type" chart-data="data"
                            chart-labels="labels" chart-series="series" chart-options="options"
                            chart-colors="colors">
                    </canvas>

所以我用那个代码得到了这个结果:


请提供任何帮助

将x轴的堆叠值更改为false。 . 这就是你要找的吗

$scope.options = {
                scales: {
                    xAxes: [{
                        stacked: false, // change to false
                        ticks : {
                            beginAtZero: true
                        }
                    }],
                    yAxes: [{
                        stacked: false,
                        ticks : {
                            beginAtZero: true
                        }
                    }]
                }
            };

我通过更改代码来解决此问题:

$scope.labels = ["Janvier", "Février", "Mars", "Avril" , "Mai", "Juin",
                         "Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Décembre" ];
                        $scope.type = "StackedBar";
                        $scope.series = ['Vital épargne', 'Prévoyance groupe'];
                        $scope.options = {
                            scales: {
                                xAxes: [{
                                    stacked: true,
                                    ticks: {
                                        beginAtZero: true
                                    }
                                }],
                                yAxes: [{
                                    stacked: true,
                                    ticks: {
                                        beginAtZero: true
                                    }
                                }]
                            }
                        };

 $scope.data = [
                           [59, 80, 81, 56, 55, 40, 65],
    [65, 59, 90, 81, 56, 55, 40],
    [60, 59, 80, 81, 56, 55, 40]
                        ];
                        $scope.datasetOverride = [
                            {
                                label: "Vital épargne: réalisé",
                                backgroundColor: "rgba(99,255,132,0.2)",
                                data: [65, 59, 90, 81, 56, 55, 40],
                                stack: 1
                            },

                            {
                                label: "Prévoyance groupe: réalisé",
                                backgroundColor: "rgba(99,132,255,0.2)",
                                data: [59, 80, 81, 56, 55, 40, 65],
                                stack: 2
                            },
                            {
                                label: "Prévoyance groupe: estimé",
                                backgroundColor: "rgba(255,99,132,0.2)",
                                data: [60, 59, 80, 81, 56, 55, 40],
                                stack: 2
                            }
                        ];
结果如下:

检查我的plunker

angular-chart.js的使用chart.js。“stack”datasetOverride选项仅在Chart.js中可用

angular-chart.js中有一个用于升级chart.js版本的文件,但它似乎没有得到积极维护


因此,如果试图在angular chart.js中使用此选项,则单独分组条形图的堆栈选项将不起作用。勾选这个,你是说html代码中的图表条吗?如果已经勾选了,你能为此贴一个标签吗?我会纠正的。这是:我贴了一个答案检查。是的,谢谢,但对于每个酒吧,我想有一个堆叠酒吧。一群堆积如山的人如果我说得对的话。您正在寻找一个混合图@GhizlaneLotfilet说,我该怎么做呢?我检查过了,但角度图不支持,因为它们只允许数组输入@GhizlaneLotfiThanks@Sibi Raj,我将尝试找到解决方案或更改角度图。为示例提供的链接与person@NidhinPrathap我是添加请求的人,我回答了我的请求我是在问你是否有解决方案bcz你提到的解决方案不起作用