我怎样才能用 chart.js(react-chartjs-2) 实现类似这张图片的效果？

Question

是否可以实现这个-

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

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

Answer 1

您要搜索的是一种名为“堆积条形图”的东西。这种图表可以和你提到的库一起使用。

如文档中所示：

Stacked bar charts can be used to show how one data series is made up of a number of smaller pieces.

这里是文档中的一个例子：

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

我怎样才能用 chart.js(react-chartjs-2) 实现类似这张图片的效果？

How can I achieve something like this image with chart.js(react-chartjs-2)?

css

frontend

reactjs

chart.js

react-chartjs-2