css - 如何使用 chart.js(react-chartjs-2) 实现类似此图像的效果?
问题描述
是否有可能实现这一点-
- 同一条中的不同颜色
- 颜色长度与当年可用数据的百分比成正比
总共有 4 年,我想将每个条分成最多 4 个部分(可以是 1、2、3 或 4 个部分,具体取决于选择的年份)。
解决方案
您正在寻找的是一种叫做“堆积条形图”的东西。这种图表可以与您提到的库一起使用。
如文档中所述:
堆积条形图可用于显示一个数据系列是如何由许多较小的部分组成的。
这是从文档中获取的示例:
var stackedBar = new Chart(ctx, {
type: 'bar',
data: data,
options: {
scales: {
x: {
stacked: true
},
y: {
stacked: true
}
}
}
});
请,有关更多详细信息,请参阅文档的此部分:
https://www.chartjs.org/docs/next/charts/bar/#stacked-bar-chart
推荐阅读
- bash - MAKEFILE 中的键值对
- javascript - 将从 api 调用检索到的参数传递给 FormBuilder 中的自定义验证器
- xslt - XSLT:在 for-each 循环中获取先前的值
- c# - 我在使用 Unity 2019 进行的 WebGL 构建时收到“buildCompatibilityCheck”错误。为什么?
- r - 在闪亮的应用程序中将 formatStyle() 与 JS 代码组合时未加载 DT::datatable
- python - 如何将字典列表和嵌套列表转换为 pandas 数据框以用于降价表生成器?
- android - 图像视图在约束布局中移动到左侧
- c# - Asp Core - 树结构 - 映射
- javascript - 用户如何从 Microsoft Graph 中的文件预览打印整个文档
- node.js - OAuth2 服务器 [Node.JS]