Horizontal stacked bar chart with chart.js(带有 chart.js 的水平堆积条形图)
问题描述
我正在尝试找出是否有任何插件可以使用 chart.js 制作水平堆积条形图
I am trying to find out if there is any plugin to do a horizontal stacked bar chart with 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
有人知道如何实现吗?
推荐答案
我知道这已经几个月了,但我想我会为后代添加我的答案.
I know this is a few months old, but I thought I'd add my answer for future generations.
我可以不用额外的插件.如果在 scales 下将 xAxes 和 yAxes 设置为stacked:true,则可以创建一个堆叠的水平图.
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.
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
这是一个快速的笔来展示我是如何做到的.http://codepen.io/jamiecalder/pen/NrROeB
Here's a quick pen to show how I did it. http://codepen.io/jamiecalder/pen/NrROeB
奖励:包括在图表上显示值的代码
Bonus: Includes code to show the values on the graph
这篇关于带有 chart.js 的水平堆积条形图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:带有 chart.js 的水平堆积条形图
基础教程推荐
- 直接将值设置为滑块 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01