ChartJS - 带有多个环的圆环图

Question

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

Answer 1

您可以在fiddle link

找到解决方案

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

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

希望它有所帮助。

Answer 3

我知道这是一个古老的问题，但是昨天陷入了同样的问题，到目前为止，我能碰到的最好的是Chart js，这是一个plugin，他确实做到了（甚至更多！）