Javascript 如何使用angular-chart.js[duplicated]创建一组StackedBar
我正在使用angular-chart.js,但我发现在创建一组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
$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
}
];
结果如下:
检查我的plunkerangular-chart.js的使用chart.js。“stack”datasetOverride选项仅在Chart.js中可用
angular-chart.js中有一个用于升级chart.js版本的文件,但它似乎没有得到积极维护
因此,如果试图在angular chart.js中使用此选项,则单独分组条形图的堆栈选项将不起作用。勾选这个,你是说html代码中的图表条吗?如果已经勾选了,你能为此贴一个标签吗?我会纠正的。这是:我贴了一个答案检查。是的,谢谢,但对于每个酒吧,我想有一个堆叠酒吧。一群堆积如山的人如果我说得对的话。您正在寻找一个混合图@GhizlaneLotfilet说,我该怎么做呢?我检查过了,但角度图不支持,因为它们只允许数组输入@GhizlaneLotfiThanks@Sibi Raj,我将尝试找到解决方案或更改角度图。为示例提供的链接与person@NidhinPrathap我是添加请求的人,我回答了我的请求我是在问你是否有解决方案bcz你提到的解决方案不起作用