Chart.js 以相反方向堆叠条形图答案

【问题标题】：Chart.js stacked bar chart in opposite directionChart.js 以相反方向堆叠条形图
【发布时间】：2017-08-06 07:52:53
【问题描述】：

我正在尝试使用 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 轴并不集中，因为它被推到右侧，因为左侧有更多数据。我什至不确定这是否是将图表设置为相反方向的正确方法。我怎样才能正确地做到这一点？

【问题讨论】：

是的，这是正确的方法，这是预期的行为！
但是向左增长的 x 轴显示负值。有什么办法可以使它积极吗？此外，将鼠标悬停在栏上时的值也显示为负数。有没有办法覆盖它？因为我似乎找不到任何关于这方面的例子，但我看到一些用谷歌图表可以做到的。
是的，有办法！你想要this 之类的东西吗？
是的，这就是我想要实现的目标。我通过将女性设置为负值来玩一个把戏：p

标签： javascript chart.js stacked-chart

【解决方案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>

【讨论】：

非常感谢！！！！但是有没有办法将轴集中为0？因为它似乎有点推向右侧
不确定它是否适合您的情况，但您可以为 x 轴刻度设置 min 值，例如 - min: -2.0 （虽然，不建议这样做，你看到的是正确的行为）
我又开了一个话题：stackoverflow.com/questions/45630315/…你介意看看吗？