Javascript Chart.js反向堆叠条形图

我正在尝试使用chart.js实现类似的功能。我想展示每个年龄组的男性/女性数据：

以下是我的图表选项：

var options = {
    layout: {
        padding: {
            top: 5,
        }
    },
    scales:
    {
        yAxes: [{
            display: true,
            barPercentage: 0.4,
            ticks: {
                fontSize: 12
            },
            stacked: true,
        }],
        xAxes: [{
            stacked: true,
        }]
    },
    responsive: true,
    maintainAspectRatio: false,
    legend: {
        display: false,
    },
    animation: {
        animateScale: true,
        animateRotate: true
    },
};

var opt = {
    type: "horizontalBar",
    data: {
        labels: ageGroup,
        datasets: [{
            label: 'Male',
            data: maleData,
            backgroundColor: '#2196F3',
            hoverBackgroundColor: '#2196F3'
        },
        {
            label: 'Female',
            data: femaleData,
            backgroundColor: '#E91E63',
            hoverBackgroundColor: '#E91E63'
        }]
    },
    options: options
};

我将femaleData数组中的正数改为负数，以获得上述结果：

for (var i = 0; i < femaleData.length; i++) {
    femaleData[i] = -Math.abs(femaleData[i]);
}

for（var i=0；i

但是，正如您所看到的，0处的y轴不是集中的，因为它有点被推到右侧，因为左侧获得了更多的数据。我甚至不确定这是否是将图表设置为相反方向的正确方法。有什么想法吗

提前感谢

根据OP的评论部分中提到的要求

ꜱʜᴏᴡ ᴘᴏꜱɪᴛɪᴠᴇ ᴠᴀʟᴜᴇꜱ ᴏɴx-ᴀxɪꜱ

对x轴刻度使用以下回调函数：

callback: function(t, i) {
   return t < 0 ? Math.abs(t) : t;
}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

var年龄组=['0-10'，'11-20'，'21-30'，'31-40'，'41-50'，'51-60'，'61-70'，'71-80'，'80+'；
var maleData=[30,0,0,0,10,0,0,0,0]；
var femaleData=[0,0,0，-20，-50，-20,0,0,0]；
变量选项={
布局：{
填充：{
前五名，
}
},
比例：{
雅克斯：[{
显示：对，
百分比：0.4，
滴答声：{
字体大小：12
},
对,，
}],
xAxes：[{
对,，
滴答声：{
回调：函数（t，i）{
返回t<0？数学abs（t）：t；
}
}
}]
},
工具提示：{
回调：{
标签：功能（t，d）{
var datasetLabel=d.datasets[t.datasetIndex].label；
var xLabel=Math.abs（t.xLabel）；
返回datasetLabel+'：'+xLabel；
}
}
},
回答：是的，
//MaintaintAspectRatio:false，
图例：{
显示：假，
},
动画：{
没错，
动画片：真
},
};
变量opt={
类型：“水平条”，
数据：{
标签：年龄组，
数据集：[{
标签：‘男性’，
数据：maleData，
背景颜色：“#2196F3”，
hoverBackgroundColor:“#2196F3”
}, {
标签：‘女性’，
数据：女性数据，
背景颜色：“#E91E63”，
hoverBackgroundColor:“#E91E63”
}]
},
选项：选项
};
新图表（ctx、opt）

是的，这是正确的方法，也是预期的行为！但是向左边增长的x轴显示负值。有没有什么方法可以让它变得积极呢？此外，将鼠标悬停在该条上时的值也显示为负值。有什么方法可以推翻它吗？因为我似乎找不到任何关于这方面的例子，但我看到一些谷歌图表能够做到这一点。是的，有一种方法！你想要什么？是的，这就是我想要实现的。我玩了一个把戏，将女性的设置为负值：p谢谢！！！！但是，有没有办法集中0的轴？因为它看起来有点向右侧推，不确定它是否适合您的情况，但是您可以为x轴刻度设置
min
值，比如-
min:-2.0
（虽然不推荐，但您看到的是正确的行为）我打开了另一个线程：您介意看一下吗？
callbacks: {
   label: function(t, d) {
      var datasetLabel = d.datasets[t.datasetIndex].label;
      var xLabel = Math.abs(t.xLabel);
      return datasetLabel + ': ' + xLabel;
   }
}