ChartJS: получить отдельные значения минус другое значение в пользовательской легенде

Question

У меня есть круговая диаграмма с несколькими кольцами и я создал функцию пользовательской легенды с кодом ниже:

var data = [{
        labels: ["Mumbai", "Chennai", "Hyderabad", "Bangalore"],
        data: [30, 32, 38, 50],
        backgroundColor: [
            "#4b77a9",
            "#5f255f",
            "#d21243",
            "#B27200"
        ],
        borderColor: "#fff"
    }, {
        labels: ["India 2018", "India 2017"],
        data: [450, 400],
        backgroundColor: [
            "#92d400",
            "#95a455"
        ],
        borderColor: "#fff"
    }];

Первое кольцо представляет четыре отдельных города, а центральные кольца представляют общую стоимость страны, но не общую сумму четырех городов.

Я хочу показать эту пользовательскую легенду:

Мумбаи: 30 Ченнаи: 32 Хайдарабад: 38 Бангалор: 50 Индия: 450

Остальная часть Мумбая: 420 Остальная часть Ченнаи: 418 Остальная часть Хайдарабада: 412 Остальная часть Бангалора: 400

Первый набор - отдельные значения данных. Второй набор (значение Индии - значение города)

Ниже приведена пользовательская функция легенды:

legendCallback: function (chart) {
var text = [];
text.push('<ul class="list-inline my-0 text-center ' + chart.id + '-legend text-secondary">');
for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
    text.push('<li class="list-inline-item"><i class="fas fa-circle pr-1" style="color:' +
            chart.data.datasets[0].backgroundColor[i] + '"></i>');
    if (chart.data.datasets[0].labels[i]) {
        text.push('<span class="font-weight-bold">' + chart.data.datasets[0].labels[i] + ': ' + chart.data.datasets[0].data[i] +'</span>');
    }
    text.push('</li>');
}
text.push('</ul>');
text.push('</ul>');
text.push('<ul class="list-inline">');
text.push('<li class="list-inline-item">Rest of Mumbai: 420</li>');
text.push('<li class="list-inline-item">Rest of Chennai: 418</li>');
text.push('<li class="list-inline-item">Rest of Hyderabad: 412</li>');
text.push('<li class="list-inline-item">Rest of Bangalore: 400</li>');
text.push('</ul>');
return text.join('');
},

Я могу показать отдельные значения меток, но не остальные значения меток ***.

Вот JSFiddle (https://jsfiddle.net/kingBethal/aubsjn4c/11/)

Обновление # 1

Ниже в таблице представлены значения в круговой диаграмме и требуемый вывод пользовательской легенды:

Пользовательская легенда покажет (India 2018 minus individual city) значений.

Пример:

Остальная часть Мумбаи = Индия 2018 (450) - Мумбаи (30) = 420

Answer 1

просто нужно сослаться на второй набор данных и вычесть значения города ...

здесь вы создаете первую легенду ...

for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
    text.push('<li class="list-inline-item"><i class="fas fa-circle pr-1" style="color:' + chart.data.datasets[0].backgroundColor[i] + '"></i>');
    if (chart.data.datasets[0].labels[i]) {
        text.push('<span class="font-weight-bold">' + chart.data.datasets[0].labels[i] + ': ' + chart.data.datasets[0].data[i] +'</span>');
    }
    text.push('</li>');
}

чтобы построить второе, используйте тот же код, но ссылайтесь на второй набор данных и вычтите значение города ...

for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
    text.push('<li class="list-inline-item"><i class="fas fa-circle pr-1" style="color:' + chart.data.datasets[0].backgroundColor[i] + '"></i>');
    if (chart.data.datasets[0].labels[i]) {
        text.push('<span class="font-weight-bold">Rest of ' + chart.data.datasets[0].labels[i] + ': ' +
            (chart.data.datasets[1].data[0] - chart.data.datasets[0].data[i]) + // <-- second dataset = datasets[1] and india 2018 = data[0]
        '</span>');
    }
    text.push('</li>');
}

см. Следующий рабочий фрагмент ...

var data = [{
            labels: ["Mumbai", "Chennai", "Hyderabad", "Bangalore"],
            data: [30, 32, 38, 50],
            backgroundColor: [
                "#4b77a9",
                "#5f255f",
                "#d21243",
                "#B27200"
            ],
            borderColor: "#fff"
        }, {
            labels: ["India 2018", "India 2017"],
            data: [450, 400],
            backgroundColor: [
                "#92d400",
                "#95a455"
            ],
            borderColor: "#fff"
        }];

    var options = {
        cutoutPercentage: 35,
legendCallback: function (chart) {
    var text = [];
    text.push('<ul class="list-inline my-0 text-center ' + chart.id + '-legend text-secondary">');
    for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
        text.push('<li class="list-inline-item"><i class="fas fa-circle pr-1" style="color:' + chart.data.datasets[0].backgroundColor[i] + '"></i>');
        if (chart.data.datasets[0].labels[i]) {
        	text.push('<span class="font-weight-bold">' + chart.data.datasets[0].labels[i] + ': ' + chart.data.datasets[0].data[i] +'</span>');
        }
        text.push('</li>');
    }
    for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
        text.push('<li class="list-inline-item"><i class="fas fa-circle pr-1" style="color:' + chart.data.datasets[0].backgroundColor[i] + '"></i>');
        if (chart.data.datasets[0].labels[i]) {
        	text.push('<span class="font-weight-bold">Rest of ' + chart.data.datasets[0].labels[i] + ': ' +
        		(chart.data.datasets[1].data[0] - chart.data.datasets[0].data[i]) + // <-- second dataset = datasets[1] and india 2018 = data[0]
        	'</span>');
        }
        text.push('</li>');
    }
    text.push('</ul>');
    return text.join('');
},
        legend: {
            display: false
        },
        plugins: {
            datalabels: {
                color: '#ffffff'
            }
        },
        tooltips: {
            callbacks: {
                label: function (item, data) {
                    var label = data.datasets[item.datasetIndex].labels[item.index];
                    var value = data.datasets[item.datasetIndex].data[item.index];
                    var allData = data.datasets[item.datasetIndex].data;
                    var tooltipData = allData[item.index];
                    return label + ': ' + tooltipData;
                }
            },
            titleFontSize: 14,
            bodyFontSize: 12
        }
    };

    var ctx = document.getElementById("my-chart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            datasets: data
        },
        options: options
    });
    $('#legend').html(myChart.generateLegend());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="my-chart"></canvas>
<div id="legend"></div>