javascript - ChartJS - 带有多个环的圆环图

Question

是否可以使用 ChartJS 创建具有多个环的圆环图，如下所示？

Answer 1

您可以在小提琴链接中找到解决方案

var ctx = document.getElementById("chart-area").getContext("2d");
var myDoughnut = new Chart(ctx, config);
var config = {
    type: 'doughnut',
    data: {
        datasets: [{
            data: [
               10,20,30
                ],
                backgroundColor: [
                "#F7464A",
                "#46BFBD",
                "#FDB45C"
            ],
        }, {
            data: [
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor()

            ],
                backgroundColor: [
                "#F7464A",
                "#46BFBD",
                "#FDB45C"
            ],
        }],
        labels: [
            "Red",
            "Green",
            "Yellow"
        ]
    },
    options: {
        responsive: true
    }
};

Answer 2

您需要将多个数据集添加到图表中。它们将根据您的需要显示。请查看他们自己的饼图示例。您可以下载并在本地打开它作为示例。他们有多个数据集，使图表看起来像您需要的那样。

希望它有所帮助。

Answer 3

我知道这是个老问题，但昨天我也遇到了同样的问题，到目前为止，我接触到的最好的是 Chart js，这是一个可以做到这一点的插件（甚至更多！）