Chart.js v4.4.2图表顶部标题栏无法移除问题求助

你遇到的问题核心是Chart.js v4.x版本的配置结构和旧版本（v2/v3）有重大变化，你用的是旧版的配置路径，所以设置legend.display: false不会生效。

关键变化点： #

• 在v4中，图例（legend）的配置不再是顶层的options.legend，而是移到了options.plugins.legend下
• 坐标轴的配置也从数组形式（如yAxes: []）改成了对象形式（scales.y），这个虽不影响图例，但也需要修正以适配v4版本

修改后的完整配置代码： #

options: {
    scales: {
        y: { // 替换原来的yAxes数组写法
            ticks: {
                beginAtZero: true,
                min: 0
            }
        }
    },
    plugins: {
        legend: {
            display: false // 这里才是v4中控制图例显示的正确位置
        }
    }
}

替换后的完整脚本： #

<script>
    var ctx = document.getElementById('studentChart').getContext('2d');
    var studentChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [<?php echo implode(',', range(1, 31)); ?>],
            datasets: [{
                label: 'Male',
                data: [<?php echo implode(',', $analyticsData['maleStudents']); ?>],
                backgroundColor: 'rgb(54 162 235 / 5%)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 2,
                fill: true,
            }, {
                label: 'Female',
                data: [<?php echo implode(',', $analyticsData['femaleStudents']); ?>],
                backgroundColor: 'rgb(255 99 132 / 5%)',
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 2,
                fill: true,
            }]
        },
        options: {
            scales: {
                y: {
                    ticks: {
                        beginAtZero: true,
                        min: 0
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        }
    });
</script>

额外说明： #

如果之后需要自定义图例样式，generateLabels方法也要放到plugins.legend.labels下，示例如下：

plugins: {
    legend: {
        display: true,
        labels: {
            generateLabels: function(chart) {
                return [
                    { text: 'Male', fillStyle: 'rgba(54, 162, 235, 0.1)', strokeStyle: 'rgba(54, 162, 235, 1)' },
                    { text: 'Female', fillStyle: 'rgba(255, 99, 132, 0.1)', strokeStyle: 'rgba(255, 99, 132, 1)' }
                ];
            }
        }
    }
}

修改后即可正常隐藏顶部的图例区域。

内容的提问来源于stack exchange，提问作者Khalil