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

如何在chart.js的圆环图中添加多个图例,chart.js,Chart.js,我试图在chart.js的甜甜圈聊天中为两个不同的数据集生成两个不同的图例,但是我在实现这一点上遇到了问题。我在任何地方都找不到任何有效的答案。怎样才能做到呢 var config = { type: 'doughnut', data: { datasets: [ /* Outer doughnut data*/ { data: [10, 20, 30, 40],

我试图在chart.js的甜甜圈聊天中为两个不同的数据集生成两个不同的图例,但是我在实现这一点上遇到了问题。我在任何地方都找不到任何有效的答案。怎样才能做到呢

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