Javascript 带有 chart.js 的水平堆积条形图
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/33772333/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Horizontal stacked bar chart with chart.js
提问by aruizga
I am trying to find out if there is any plugin to do a horizontal stacked bar chart with chart.js
我试图找出是否有任何插件可以使用 chart.js 制作水平堆叠条形图
I see there are plugins for stacked bar charts and also for horizontal bar charts, but I didn't find one that combines both.
我看到有用于堆叠条形图和水平条形图的插件,但我没有找到将两者结合的插件。
https://github.com/Regaddi/Chart.StackedBar.js
https://github.com/Regaddi/Chart.StackedBar.js
Anyone know how to achieve this?
有谁知道如何实现这一目标?
回答by Jamie Calder
I know this is a few months old, but I thought I'd add my answer for future generations.
我知道这已经有几个月了,但我想我会为后代添加我的答案。
I was able to do without extra plugins. If you set the xAxes and yAxes to stacked:true under scales, you can create a stacked horizontal graph.
我可以不用额外的插件。如果在比例尺下将 xAxes 和 yAxes 设置为 stacked:true,则可以创建堆叠水平图。
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
Here's a quick pen to show how I did it. http://codepen.io/jamiecalder/pen/NrROeB
这里有一支快速笔来展示我是如何做到的。http://codepen.io/jamiecalder/pen/NrROeB
Bonus: Includes code to show the values on the graph
奖励:包括在图表上显示值的代码
回答by potatopeelings
Take a look at the fork ChartNew.js (https://github.com/FVANCOP/ChartNew.js). This has HorizontalStackedBars (and many other additions). See https://github.com/FVANCOP/ChartNew.js/wiki/050_available_graphsfor how its going to look like.
看看叉 ChartNew.js ( https://github.com/FVANCOP/ChartNew.js)。这有 HorizontalStackedBars(以及许多其他附加功能)。请参阅https://github.com/FVANCOP/ChartNew.js/wiki/050_available_graphs了解其外观。