我有一个带有两个数据集的水平条,以显示一个简单的年龄金字塔。
我在female
中使用负值,在male
中使用正值
如何使两个数据集中的条形对称并消除它们之间的间距?这是代码。
<script>
new Chart(document.getElementById("bar-chart"), {
type: 'horizontalBar',
data: {
labels: ["18-25", "25-30", "30-35", "35-40"],
datasets: [
{
data: <?php echo json_encode($data_chartm); ?>,
label: "Male",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
},
{
data: <?php echo json_encode($data_chartf); ?>,
label: "Female",
backgroundColor: ["blue", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"]
}
]
},
options: {
title: {
display: true,
text: 'Pyramide des ages'
},
}
});
</script>
这是$ data_chartm和$ data_chatf的内容:
$data_chartm=[4,5,9,10];
$data_chartf=[-4,-5,-9,-10];
[Baha,ésócolocar一正长鳞片堆积成真
new Chart(document.getElementById("ProdFicha_Idade"), {
type: 'horizontalBar',
data: {
labels: ["18-25", "25-30", "30-35", "35-40"],
datasets: [
{
data: [1,2,3,4],
label: "Male",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
},
{
data: [-1,-2,-3,-4],
label: "Female",
backgroundColor: ["blue", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"]
}
]
},
options: {
title: {
display: true,
text: 'Pyramide des ages'
},
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
})