ChartJS 自定义工具提示和 LegendText 版本更新后不显示

Question

之前我使用的是 ChartJS 2.7.2 版本，现在更新到 4.4.1 因此，在我的图表中，我正在创建自定义工具提示和自定义图例文本，但版本更新后两者都不起作用

这是2.7.2版本的截图：

我想要这样的图例文本和工具提示，但现在使用4.4.1，无法像这样显示

下面是我的代码： `new Chart(document.getElementById('donutChart'), { 类型：'甜甜圈'，

data: {
    labels: ['Red', 'Blue', 'Green', 'Teal', 'Yellow'],
    datasets: [{
        data: [123, 321, 213, 111, 222],
        backgroundColor: ['Red', 'Blue', 'Green', 'Teal', 'Yellow'],
        hoverOffset: 4
    }]
},
options: {
    plugins: {
        datalabels: {
            color: 'white',
            font: {
                weight: 'bold'
            },
        },
    },
    tooltips: {
        callbacks: {
            title: function(tooltipItem, data) {
                return data['labels'][tooltipItem[0]['index']];
            },
            label: function(tooltipItem, data) {
                return data['datasets'][0]['data'][tooltipItem['index']];
            },
            afterLabel: function(tooltipItem, data) {
                var dataset = data['datasets'][0];
                var total = dataset.data.reduce((a, b) => a + b, 0);
                var percent = Math.round((dataset['data'][tooltipItem['index']] / total) * 100);
                return '(' + percent + '%)';
            }
        },
        backgroundColor: '#FFF',
        titleFontSize: 14,
        titleFontColor: 'black',
        bodyFontColor: '#000',
        bodyFontSize: 14,
        displayColors: false
    },
    maintainAspectRatio: false,
    legend: { position: 'bottom' },
},
plugins: [{
    afterLayout: function(chart) {
        let total = chart.data.datasets[0].data.reduce((a, b) => {
            return a + b;
        });
        chart.legend.legendItems.forEach(
            (label) => {
                let value = chart.data.datasets[0].data[label.index];
                label.text = value + ' | ' + label.text + ' | ' + (value / total * 100).toFixed(0) + '%';
                return label.text;
            }
        )
    }
}],

});`

在调试过程中，我可以观察到 label.text 值是正确的，但它们没有按预期显示。

Answer 1

你可以这样做。

var chart = new Chart(document.getElementById('donutChart'), {
    type: 'doughnut',
    data: {
        labels: ['Red', 'Blue', 'Green', 'Teal', 'Yellow'],
        datasets: [{
            data: [123, 321, 213, 111, 222],
            backgroundColor: ['Red', 'Blue', 'Green', 'Teal', 'Yellow'],
            originalLabels: ['Red', 'Blue', 'Green', 'Teal', 'Yellow'],
            hoverOffset: 4
        }]
    },
    options: {
        plugins: {
            tooltip: {
                backgroundColor: '#FFF',
                titleFontSize: 14,
                titleColor: '#000',
                titleFont: {
                    weight: 'bold'
                },
                bodyColor: '#000',
                bodyFontSize: 14,
                displayColors: false,
                yAlign:'top',
                callbacks: {
                    title: function(tooltipItem) {
                        var data = tooltipItem;
                        var dataset = data[0].dataset;
                        var originalLabel = dataset.originalLabels[tooltipItem[0].dataIndex];
                        return originalLabel;
                    },
                    label: function(tooltipItem) {
                        var data = tooltipItem;
                        var dataset = data.dataset;
                        return dataset.data[data.dataIndex];
                    },
                    afterLabel: function(tooltipItem) {
                        var data = tooltipItem;
                        var dataset = data.dataset;
                        var total = dataset.data.reduce((a, b) => a + b, 0);
                        var percent = Math.round((dataset.data[data.dataIndex] / total) * 100);
                        return '(' + percent + '%)';
                    }
                }
            },
        },
        maintainAspectRatio: false,
        legend: {
            position: 'bottom'
        },
    },
    plugins: [{
        beforeInit: function (chart, options) {
            var dataset = chart.data.datasets[0];
            var total = dataset.data.reduce((a, b) => a + b, 0);

            // Modify the labels before initializing the chart
            chart.data.labels = chart.data.labels.map(function (label, index) {
                var value = dataset.data[index];
                return value + ' | ' + label + ' | ' + ((value / total) * 100).toFixed(0) + '%';
            });
        }
    }],
});

<div>
  <canvas id="donutChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

您会注意到我对您的原始代码进行了一些更改。

我在

originalLabels

中添加了

datasets

属性。这是需要的，因为 afterLayout` 正在更改标签，并将该更改也传输到工具提示。

这样，我保留了最初设置为标签的内容，并可以稍后将其用于工具提示。

第二个更改是

tooltip

（注意代码中的单数与复数）已移至

options.plugins

内，正如@kikon 在您问题的评论中所建议的那样。