如何在chart.js中的圆环图中添加多个图例

xiozqbni  于 2023-04-06  发布在  Chart.js
关注(0)|答案(1)|浏览(128)

我试图在chart.js的甜甜圈聊天中为两个不同的数据集生成两个不同的图例,但我无法实现这一点。我无法在任何地方找到任何有效的答案。如何才能做到呢?
This is how it looks like now

var config = {
    type: 'doughnut',
    data: {
        datasets: [
            /* Outer doughnut data*/
            {
                data: [10, 20, 30, 40],
                backgroundColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(153, 102, 255, 1)'
                ],
                label: 'Personal'
            },
            /* Outer doughnut data ends*/
            /* Inner doughnut data*/
            {
                data: [45, 25, 11, 20],
                backgroundColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(153, 102, 255, 1)',
                ],
                label: 'Benchmark'
            }
            /* Inner doughnut data ends*/
        ],
        labels: [
            "Food & Groceries",
            "Home & Utilities",
            "Personal & Medical",
            "Children"
        ]
    },
    options: {
        responsive: true,
        legend: {
            position: 'right',
        },
        title: {
            display: true,
            text: 'Total Weekly spend $800'
        },
        animation: {
            animateScale: true,
            animateRotate: true
        },

        tooltips: {
            callbacks: {
                label: function (item, data) {
                    console.log(data.labels, item);
                    return data.datasets[item.datasetIndex].label + ": " + data.labels[item.index] + ": " + data.datasets[item.datasetIndex].data[item.index];
                }
            }
        }
    }
};
window.onload = function () {
    var ctx = document.getElementById("expensesBreakdown")
        .getContext("2d");
    window.myDoughnut = new Chart(ctx, config);
};

This is what I'm trying to achieve

oyt4ldly

oyt4ldly1#

查看此内容:https://www.chartjs.org/docs/latest/samples/other-charts/multi-series-pie.html
这是一个多层次的饼图,您可以在中间使用透明颜色来实现预期的结果。

相关问题