表单提交页面重载后Chart.js图表未更新的技术咨询

我来帮你搞定这个问题！你遇到的情况其实很常见——浏览器的缓存机制或者页面跳转后的复用行为，导致图表没有重新拉取最新数据。结合你提到的cache: false和chart.update()，咱们可以通过以下几步调整代码来解决：

1. 彻底绕过浏览器缓存 #

虽然你设置了cache: false，但有些浏览器对GET请求的缓存处理还是比较顽固。咱们可以在请求URL后面追加一个时间戳参数，确保每次请求都是全新的，浏览器不会复用缓存的结果。

2. 封装图表逻辑为可复用函数 #

把图表的初始化和更新逻辑抽成独立函数，这样不管是页面首次加载，还是跳转回来后，都能方便地调用它来刷新数据和图表。

3. 监听页面显示事件，主动触发刷新 #

浏览器的前进/后退操作可能会从缓存中加载页面，这时候原来的Ajax代码不会自动重新执行。咱们可以监听pageshow事件，当页面重新显示时主动触发数据拉取和图表更新。

4. 复用图表实例，避免重复创建 #

把图表实例变量放在外层作用域，这样可以判断是否已经创建过图表：如果存在，就直接更新数据并调用chart.update()；如果不存在，再创建新的图表实例。

修改后的完整代码示例 #

// 把图表实例放在外层作用域，方便后续复用
let currentYearChart = null;

// 封装图表初始化/更新函数
function loadCurrentYearChart() {
    const apiUrl = '{% url "saveskore:api-current-year-savings" %}';
    // 追加时间戳参数，彻底绕过缓存
    const urlWithTimestamp = `${apiUrl}?timestamp=${new Date().getTime()}`;

    $.ajax({
        url: urlWithTimestamp,
        type: 'GET',
        cache: false, // 双重保险
        dataType: 'json',
        success: function(data) {
            const ctx = document.getElementById('current-year-chart');
            
            // 判断图表实例是否存在
            if (currentYearChart) {
                // 更新现有图表的数据
                currentYearChart.data.labels = data['dates'];
                currentYearChart.data.datasets[0].data = data['income'];
                currentYearChart.data.datasets[1].data = data['expenses'];
                currentYearChart.data.datasets[2].data = data['savings_goal'];
                currentYearChart.data.datasets[3].data = data['avail_to_spend'];
                currentYearChart.options.title.text = 'Savings for ' + data['year'];
                // 调用update方法刷新图表
                currentYearChart.update();
            } else {
                // 创建新的图表实例
                currentYearChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: data['dates'],
                        datasets: [
                            {
                                label: data['income_label'],
                                backgroundColor: "#8e5ea2",
                                data: data['income'],
                            },
                            {
                                label: data['expense_label'],
                                backgroundColor: 'green',
                                data: data['expenses'],
                            },
                            {
                                label: data['savings_label'],
                                backgroundColor: "#3e95cd",
                                data: data['savings_goal'],
                            },
                            {
                                label: data['avail_label'],
                                backgroundColor: "#ffc0cb", // 注意："#pink"不是合法颜色值，改为标准粉色十六进制码
                                data: data['avail_to_spend'],
                            },
                        ]
                    },
                    options: {
                        legend: { display: false },
                        title: {
                            display: true,
                            text: 'Savings for ' + data['year']
                        }
                    }
                });
            }
        }
    });
}

// 页面首次加载时调用
$(document).ready(function() {
    loadCurrentYearChart();
});

// 监听页面显示事件，跳转回来时自动刷新
window.addEventListener('pageshow', function(event) {
    // 判断是否是从缓存中加载的页面
    if (event.persisted) {
        loadCurrentYearChart();
    }
});

额外小提示 #

你代码里的backgroundColor: "#pink"是无效的写法——pink是颜色名称，但前面加#会被识别为无效的十六进制颜色值，改成"pink"或者标准十六进制值"#ffc0cb"就能正常显示啦。

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