css - 如何使用 chart.js(react-chartjs-2) 实现类似此图像的效果？

Question

是否有可能实现这一点-

1. 同一条中的不同颜色
2. 颜色长度与当年可用数据的百分比成正比

总共有 4 年，我想将每个条分成最多 4 个部分（可以是 1、2、3 或 4 个部分，具体取决于选择的年份）。

Answer 1

您正在寻找的是一种叫做“堆积条形图”的东西。这种图表可以与您提到的库一起使用。

如文档中所述：

堆积条形图可用于显示一个数据系列是如何由许多较小的部分组成的。

这是从文档中获取的示例：

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