ChartJS - 带有多个环的圆环图

2022-01-22 00:00:00 javascript chart.js donut-chart

是否可以使用 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
    }
};

相关文章