javascript 使用chart.js的水平堆叠条形图

os8fio9y 于 2023-01-19 发布在 Java

关注(0)|答案(2)|浏览(203)

我试图找出是否有任何插件做一个水平堆叠条形图与chart.js
我看到有堆叠条形图和水平条形图的插件，但我没有找到一个结合两者。
https://github.com/Regaddi/Chart.StackedBar.js
有人知道怎么做吗？

2条答案

针对CHARTJS V4更新
使用新版本的ChartJS，您需要将indexAXIS设置为'y'，并将x和y刻度设置为stacked。

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

以下是使用ChartJS https://codepen.io/jamiecalder/pen/vYaWyVy的V4更新的Codepen

我知道这是几个月前的事了，但我想我应该为后代加上我的答案。
我可以不用额外的插件来做。如果你在比例下将xaxes和yAxes设置为stacked：true，你就可以创建一个堆叠的水平图。

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

这里有一支快速笔来展示我是如何做到的。http://codepen.io/jamiecalder/pen/NrROeB

看一下分支ChartNew.js（https://github.com/FVANCOP/ChartNew.js），它有水平堆叠条（和许多其他的附加项），看https://github.com/FVANCOP/ChartNew.js/wiki/050_available_graphs看它的样子。