如何在chart.js中使条形图对称？

Question

我有一个带有两个数据集的水平条，以显示一个简单的年龄金字塔。

我在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];

Answer 1

[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
            }]
        }
    }
})