ChartJS - 带有多个环的圆环图 [英] ChartJS - Donut charts with multiple rings

问题描述

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

Is it possible to create a donut chart with multiple rings using ChartJS as shown below?

推荐答案

您可以在 fiddle 链接找到解决方案

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
    }
};

这篇关于ChartJS - 带有多个环的圆环图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！