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

下表是代表Pie和所需自定义图例输出的值的表：

自定义图例将显示(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>

ChartJS：获取单个值减去自定义图例中的另一个值

1 个答案: