Chart.js柱状图点击修改标题按钮后图表未更新问题求助

核心错误点 #

• 1. 更新函数未接收传入的图表实例，且内部引用了不存在的变量
     你调用updateConfigByMutating时传入了barChart实例，但函数定义时没有声明形参接收，同时函数内使用的chart变量不存在，实际全局图表实例的变量名是barChart。
• 2. 初始配置未开启标题插件的显示开关
     Chart.js默认标题插件为关闭状态，你的初始配置options中没有设置plugins.title.display = true，就算修改了标题文本也不会渲染到页面上。
• 3. 按钮元素放在<body>标签外部，不符合HTML结构规范，部分浏览器可能无法正常触发点击事件。

修正后完整代码 #

<body>
    <!-- 按钮放到body内部，增加文字提示方便识别 -->
    <input type="button" onclick="updateConfigByMutating(barChart)" value="更新图表标题">
    <canvas id="barChart"></canvas>
    <script>
        // 新增形参接收传入的图表实例
        function updateConfigByMutating(chart) {
            // 兼容未配置title插件的情况，先初始化配置再修改属性
            if(!chart.options.plugins) chart.options.plugins = {};
            if(!chart.options.plugins.title) chart.options.plugins.title = {};
            // 先开启标题显示再修改文本
            chart.options.plugins.title.display = true;
            chart.options.plugins.title.text = 'new title';
            chart.update();
        }

        var ctxB = document.getElementById("barChart").getContext('2d');
        var barChart = new Chart(ctxB, {
            type: 'bar',
            data: {
                labels: ["Pennetta", "Menna", "Carinci", "Notaro", "Giangiacomo", "Carugno"],
                datasets: [{
                    label: 'Andamento dei Voti - Elezioni 2021',
                    data: [<?php echo $checkpennetta[0]; ?>, <?php echo $checkmenna[0]; ?>, <?php echo $checkcarinci[0]; ?>, <?php echo $checknotaro[0]; ?>, <?php echo $checkgiangiacomo[0]; ?>, <?php echo $checkcarugno[0]; ?>],
                    backgroundColor: [
                    'rgba(250, 216, 89, 0.2)',
                    'rgba(207, 0, 15, 0.2)',
                    'rgba(232, 126, 4, 0.2)',
                    'rgba(31, 58, 147, 0.2)',
                    'rgba(137, 196, 244, 0.2)',
                    'rgba(77, 175, 124, 0.2)'
                    ],
                    borderColor: [
                    'rgba(250, 216, 89, 1)',
                    'rgba(207, 0, 15, 1)',
                    'rgba(232, 126, 4, 1)',
                    'rgba(31, 58, 147, 1)',
                    'rgba(137, 196, 244, 1)',
                    'rgba(77, 175, 124, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
                // 如果需要初始就显示标题，可在此处提前配置plugins.title相关参数
            }
        });
    </script>
</body>

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