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

但是，如您所见，由于左侧已获得更多数据，因此将其0推到右侧时y轴并未居中。我什至不确定这是否是将图表设置为相反方向的正确方法。有任何想法吗？

先谢谢了！

最佳答案

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

ᴏɴx-ᴀxɪꜱ

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

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

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

使用以下回调函数作为工具提示：

callbacks: {
   label: function(t, d) {
      var datasetLabel = d.datasets[t.datasetIndex].label;
      var xLabel = Math.abs(t.xLabel);
      return datasetLabel + ': ' + xLabel;
   }
}

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

var ageGroup = ['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];

var options = {
   layout: {
      padding: {
         top: 5,
      }
   },
   scales: {
      yAxes: [{
         display: true,
         barPercentage: 0.4,
         ticks: {
            fontSize: 12
         },
         stacked: true,
      }],
      xAxes: [{
         stacked: true,
         ticks: {
            callback: function(t, i) {
               return t < 0 ? Math.abs(t) : t;
            }
         }
      }]
   },
   tooltips: {
      callbacks: {
         label: function(t, d) {
            var datasetLabel = d.datasets[t.datasetIndex].label;
            var xLabel = Math.abs(t.xLabel);
            return datasetLabel + ': ' + xLabel;
         }
      }
   },
   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
};

new Chart(ctx, opt);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>