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

Posted 2023-02-22

【中文标题】如何使用 chart.js(react-chartjs-2) 实现类似此图像的效果？

【英文标题】：How can I achieve something like this image with chart.js(react-chartjs-2)?

【发布时间】：2021-05-15 05:53:13

【问题描述】：

有没有可能做到这一点-

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

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

【参考方案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

【讨论】：

感谢您的快速响应，这很有帮助。