Chart.js餅圖在更新后未呈現

在我當前的專案中，我想在儀表板中顯示包含所選月份資料的圖表。您可以通過一個按鈕前進或后退一個月。這一切都很好，但如果我現在想用當月的資料更新圖表，它們也會被加載，但圖表沒有呈現并且沒有錯誤訊息。

怎么了？

Ajax 結果示例： [{"session_intervall":5,"session_longrun":10,"session_speedwork":2,"session_stabilisation":0,"session_competition":0,"session_cycling":5,"session_swimming":0}]

$.ajax({
        url: "../diary/includes/training/diary-training-monthly-session-stats.php?month="   month   "&year="   year,
        type: "GET",
        success: function(monthly_stats) {

            var session_intervall = [];
            var session_longrun = [];
            var session_speedwork = [];
            var session_stabilisation = [];
            var session_competition = [];
            var session_cycling = [];
            var session_swimming = [];

            for(var i in monthly_stats) {
                session_intervall.push(monthly_stats[i].session_intervall),
                session_longrun.push(monthly_stats[i].session_longrun),
                session_speedwork.push(monthly_stats[i].session_speedwork),
                session_stabilisation.push(monthly_stats[i].session_stabilisation),
                session_competition.push(monthly_stats[i].session_competition),
                session_cycling.push(monthly_stats[i].session_cycling),
                session_swimming.push(monthly_stats[i].session_swimming)
            }

            session_intervall = parseInt(session_intervall);
            session_longrun = parseInt(session_longrun);
            session_speedwork = parseInt(session_speedwork);
            session_stabilisation = parseInt(session_stabilisation);
            session_competition = parseInt(session_competition);
            session_cycling = parseInt(session_cycling);
            session_swimming = parseInt(session_swimming);

            var userMonthlySessionStatsData = [session_intervall, session_longrun, session_speedwork, session_stabilisation, session_competition, session_cycling, session_swimming];

            var options = {
                legend: {
                    display: false
                },
                plugins: {
                    labels: {
                        render: 'value',
                        fontSize: 14,
                        fontStyle: 'bold',
                        fontColor: '#fff',
                        textShadow: true,
                        shadowColor: 'rgba(0,0,0,0.75)'
                    }
                }
            };
        
            var ctx = $("#monthy_session_stats"); 

            var userDiaryMonthSessionStatsChart = new Chart(ctx, {
                type: 'pie',
                data: {
                    datasets: [{
                        data: {},
                        backgroundColor: ['#e8e838', '#43bbd1', '#ff9f40', '#49d1b8', '#4286c9', '#38c7a1', '#ff497d']
                    }],
        
                    labels: ['Intervall', 'Longrun', 'Speedwork', 'Stabilisation', 'Competition', 'Cycling', 'Swimming']
                },
                options: options
            });

            userDiaryMonthSessionStatsChart.data.datasets.data = userMonthlySessionStatsData;
            userDiaryMonthSessionStatsChart.update();
        }
    })

uj5u.com熱心網友回復：

經過大量的測驗和研究，我找到了解決方案。首先，必須初始化圖表，然后必須輸入資料，這在兩個函式中。所以我把我的功能分成了兩個。在第一個中創建空圖表，在另一個中讀取/更新圖表資料。

emptyChart();
var chart = emptyChart();
userDiaryMonthSessionStatsData(user_id, filtermonth, filteryear, chart);

function emptyChart() {
    
    var options = {
        legend: {
            display: false
        },
        plugins: {
            labels: {
                render: 'value',
                fontSize: 14,
                fontStyle: 'bold',
                fontColor: '#fff',
                textShadow: true,
                shadowColor: 'rgba(0,0,0,0.75)'
            }
        }
    };

    var ctx = $("#monthy_session_stats"); 

    var userDiaryMonthSessionStats = new Chart(ctx, {
        type: 'pie',
        data: {
            datasets: [{
                backgroundColor: ['#e8e838', '#43bbd1', '#ff9f40', '#49d1b8', '#4286c9', '#38c7a1', '#ff497d']
            }],

            labels: [
                'Intervall',
                'Longrun',
                'Speedwork',
                'Stabilisation',
                'Competition',
                'Cycling',
                'Swimming'
            ]
        },
        options: options
    });

    return userDiaryMonthSessionStats;
}

function chartData(user_id, month, year, chart) {

    $.ajax({
        url: "../diary/includes/training/diary-training-monthly-session-stats.php?user_id="   user_id   "&month="   month   "&year="   year,
        type: "GET",
        success: function(monthly_stats) {

            var session_intervall = [];
            var session_longrun = [];
            var session_speedwork = [];
            var session_stabilisation = [];
            var session_competition = [];
            var session_cycling = [];
            var session_swimming = [];

            for(var i in monthly_stats) {
                session_intervall.push(monthly_stats[i].session_intervall),
                session_longrun.push(monthly_stats[i].session_longrun),
                session_speedwork.push(monthly_stats[i].session_speedwork),
                session_stabilisation.push(monthly_stats[i].session_stabilisation),
                session_competition.push(monthly_stats[i].session_competition),
                session_cycling.push(monthly_stats[i].session_cycling),
                session_swimming.push(monthly_stats[i].session_swimming)
            }

            session_intervall = parseInt(session_intervall);
            session_longrun = parseInt(session_longrun);
            session_speedwork = parseInt(session_speedwork);
            session_stabilisation = parseInt(session_stabilisation);
            session_competition = parseInt(session_competition);
            session_cycling = parseInt(session_cycling);
            session_swimming = parseInt(session_swimming);

            var userMonthlySessionStatsData = [session_intervall, session_longrun, session_speedwork, session_stabilisation, session_competition, session_cycling, session_swimming];

            chart.data.datasets[0].data.pop();
            chart.data.datasets[0].data = userMonthlySessionStatsData;
            chart.update();
        }
    })
}

uj5u.com熱心網友回復：

圖表建構式將 2d 背景關系作為其第一個引數，您正在傳遞一個 jQuery 物件。假設#monthy_session_stats是你的圖表，

var ctx = $("#monthy_session_stats")[0].getContext('2d');

標籤：javascript 阿贾克斯 图表

上一篇：從使用jQuery的AjaxGET回應中的選定HTML元素獲取id的問題

下一篇：使用Ajax將可變資料作為帖子發送