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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 15:28:12  来源:igfitidea点击:

Horizontal stacked bar chart with chart.js

javascriptchart.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)。这有 Horizo​​ntalStackedBars(以及许多其他附加功能)。请参阅https://github.com/FVANCOP/ChartNew.js/wiki/050_available_graphs了解其外观。