使用chart.js制作水平堆叠条形图

Question

我正在尝试寻找使用chart.js实现水平堆叠条形图的插件。

我发现有针对堆叠条形图和水平条形图的插件，但是没有找到能够同时组合两者的插件。

https://github.com/Regaddi/Chart.StackedBar.js

有人知道如何实现吗？

- aruizga

---

问题已经消失，现在这个问题变得有用了。 - abautista

Answer 1

更新适用于CHARTJS V4

在ChartJS的新版本中，您需要将indexAXIS设置为“y”，并将x和y刻度设置为stacked。

options: {
  indexAxis: 'y',
  scales: {
    x: {
      stacked: true
    },
    y: {
      stacked: true
    }
  }
}

这里是一个使用ChartJS V4更新的Codepen示例 https://codepen.io/jamiecalder/pen/vYaWyVy

---

原回答使用的是 ChartJS V2

我知道这已经过去了几个月，但我想为以后的人添加我的答案。

如果在scales下将xAxes和yAxes设置为stacked:true，您可以创建一个堆叠的水平图形而无需额外插件。

scales: {
     xAxes: [{
          stacked: true,
     }],
     yAxes: [{
          stacked: true
     }]
}

这里有一个快速示例展示我是如何完成的。http://codepen.io/jamiecalder/pen/NrROeB

- Jamie Calder

---

作为一个来自未来一代的人，我感到非常感激 :) - Matthijs

未来的我在这里！谢谢。 - Stephen85

请注意，此代码无法与最新的ChartJS版本4一起使用：它会触发错误“'Invalid scale configuration for scale: xAxes'”。 - andreszs

@andreszs，我更新了ChartJS V4的新示例。 - Jamie Calder

Answer 2

请看ChartNew.js (https://github.com/FVANCOP/ChartNew.js)。它包含有水平堆叠条形图以及其他许多功能。请查看 https://github.com/FVANCOP/ChartNew.js/wiki/050_available_graphs 了解其外观。

- potatopeelings