Question

我正在尝试使用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轴不是集中的，因为它被推到右侧，因为左侧有更多的数据。我甚至不确定这是否是以相反方向设置图表的正确方法。有什么想法吗？

先谢谢！

Answer 1

^{根据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>

Chart.js相反方向堆积条形图

1 个答案: