Chart.js柱状图AJAX更新数据后未渲染及undefined请求错误如何解决

• 重复初始化图表：代码开头连续两次调用userDiaryMonthTrainingDistanceStatsChart()，会生成两个Chart实例绑定到同一个canvas节点，导致后续更新逻辑异常，同时会触发多余的资源请求。
• 请求参数异常：调用userDiaryMonthTrainingDistanceStatsData时传入的user_id、filtermonth、filteryear三个变量在执行时未完成赋值，值为undefined，拼接后生成的请求URL携带undefined参数，就会出现你看到的错误请求；同时URL参数拼接时错误使用了HTML转义符&，JS字符串中直接使用&即可。
• 数据格式不符合Chart.js要求：柱状图的chart.data.labels需要是一维日期数组，dataset.data需要是一维数值数组，你当前的代码给这两个值都额外嵌套了多层数组，相当于把整个日期数组当成了单个标签、整个距离数组当成了单个数据点，自然无法正常渲染。

// 先确保user_id、filtermonth、filteryear三个变量已完成赋值再执行后续逻辑
var userDiaryMonthTrainingDistanceStats = userDiaryMonthTrainingDistanceStatsChart();
userDiaryMonthTrainingDistanceStatsData(user_id, filtermonth, filteryear, userDiaryMonthTrainingDistanceStats);

function userDiaryMonthTrainingDistanceStatsChart() {
    var options = {
        legend: {
            display: false,
            position: 'top',
            labels: {
                fontSize: 16,
                boxWidth: 40,
            }
        },
        plugins: {
            labels: {
                render: 'value',
                fontSize: 14,
                fontStyle: 'bold'
            }
        },
        layout: {
            padding: {
                left: 0,
                right: 0,
                top: 30,
                bottom: 0
            }
        }
    };
    var ctx = $("#monthly_training_distance_stats");
    var userDiaryMonthTrainingDistanceStats = new Chart(ctx, {
        type: 'bar',
        data: {
            datasets: [{
                backgroundColor: '#00a3ff',
                borderColor: '#00a3ff',
                hoverBackgroundColor: '#CCCCCC',
                hoverBorderColor: '#666666',
            }]
        },
        options: options
    });
    return userDiaryMonthTrainingDistanceStats
}

function userDiaryMonthTrainingDistanceStatsData(user_id, month, year, chart) {
    $.ajax({
        url: "../diary/includes/training/diary-training-monthly-training-distance-stats.php?user_id=" + user_id  + "&month=" + month + "&year=" + year,
        type: "GET",
        success: function(monthly_training_distance_stats) {
            var distance = [];
            var training_date = [];
            for(var i in monthly_training_distance_stats) {
                distance.push(monthly_training_distance_stats[i].distance);
                training_date.push(monthly_training_distance_stats[i].training_date);
            }
            // 直接赋值一维数组即可，不需要额外嵌套
            chart.data.labels = training_date;
            chart.data.datasets[0].data = distance;
            chart.update();
        }
    })
}

如果需要切换月份更新数据，直接调用userDiaryMonthTrainingDistanceStatsData(用户id, 新月份, 新年份, 已初始化的图表实例)即可，不需要重复初始化图表。

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