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

tez616oj 于 2024-01-07 发布在 Chart.js

关注(0)|答案(1)|浏览(146)

早些时候，我使用的是2.7.2版本的ChartJS，现在我更新到4.4.1，所以在我的图表中，我正在创建自定义的工具提示和自定义的图例文本，但版本更新后，两者都不工作
以下是2.7.2版本的截图：
DonutChart with LegendText and Tooltip
我想要像这样的图例文本和工具提示，但现在使用4.4.1，无法像这样显示
下面是我的代码：`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'],
        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值是正确的，但它们没有按预期显示。

chart.js

来源：https://stackoverflow.com/questions/77704153/chartjs-customised-tooltip-and-legendtext-not-displaying-after-version-update

1条答案

按热度按时间

7tofc5zh1#

你可以这样做。

Chart.register(ChartDataLabels);

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 + '%)';
                    }
                }
            },
            datalabels: {
                color: 'white',
                font: {
                    weight: 'bold'
                }
            },
            legend: {
                position: 'bottom',
                align: 'center',
                labels: {
                    align: 'start',
                    //boxHeight: 95, // this controls the height of the legend color box / marker
                    padding: 0,
                    color: 'green',
                    font: {
                        weight: 'bold'
                    },
                    textAlign: 'top'
                }
            },
        },
        maintainAspectRatio: false,
    },
    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];
        // Instead of a string, as it was before, we're returning an array, and that turns the legend label text into a multiline text
                return [value , label , ((value / total) * 100).toFixed(0) + '%'];
            });
        }
    }],
});

个字符
你会注意到我对你的原始代码做了一些修改。
我已经在datasets中添加了originalLabels属性。这是必要的，因为afterLayout正在更改标签，并将更改传输到工具提示。这样，我保留了最初设置为标签的内容，以后可以在工具提示中使用它。第二个变化是tooltip（注意你的代码中的单数和复数）被移到了options.plugins`中，正如@kikon在对你的问题的评论中所建议的那样。

赞(0）回复(0）举报 2024-01-07

我来回答

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

1条答案

相关问题

热门标签

最新问答