我怎样才能用chart.js(react-chartjs-2)实现像这样的图像？

问题描述

有没有可能做到这一点 -

1. 同一条中的不同颜色
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