在不刷新页面的情况下刷新图形的最佳方法（Python Django，ajax）

Question

一个普遍的问题 - 我正在寻找根据用户选择刷新 Django 页面上的图表的方法。该页面有一个图表、几个下拉框，您可以在其中选择参数和一个刷新按钮。目前，我可以通过 ajax 将选择捕获到我的 Django 视图中，并从数据库中为图形生成新数据。我现在需要将新生成的数据反馈到图表中并在不刷新页面的情况下刷新它。任何人都可以推荐最好的方法吗？

Answer 1

使用 JQuery 刷新图形而不刷新页面。

我正在使用 chart.js 创建图表。首先创建一个图表，并在更改事件时使用 Ajax URL 调用获取更新的数据，并将值分配给图表数据集。 /** 图表从这里开始 */

window.chart = null;
$(document).on('change', '.graph-year-earning', function () {
    var year = $(this).val();
    $.get($('.graph-ajaxload-context').data('href'), { 'year': year, 'number': Math.floor(Math.random() * (1000000 - 10 + 1) + 10) }, function (response) {
        window.chart.data.labels = response.labels;
        window.chart.data.datasets[0].soldProductLabel = response.product_sold_label;
        window.chart.data.datasets[0].totalCommissionLabel = response.monthly_commission_label;
        window.chart.data.datasets[0].dataLabel = response.your_share_label;

        if (response.total_commission == 0) {
            window.chart.options.scales.yAxes[0].ticks.suggestedMin = 0;
            window.chart.options.scales.yAxes[0].ticks.suggestedMax = 140000;
        } else {
            window.chart.options.scales.yAxes[0].ticks.suggestedMin = '';
            window.chart.options.scales.yAxes[0].ticks.suggestedMax = '';
        }

        $.each(response.data, function (index, value) {
            window.chart.data.datasets[0].soldProduct[index] = value[2];
            window.chart.data.datasets[0].data[index] = Math.round(value[0]);
        });
        window.chart.update();
        $(".txt-total-commission-by-year").html(response.total_commission)
        $('.graph-ajaxload-context .inline-loader').hide();
    });
});
if ($('.graph-ajaxload-context').length > 0) {
    showLoader()
    $('.graph-year-earning').trigger('change');
    var ctx = $('#userEarningGraph');
    window.chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: [],
            datasets: [{
                soldProductLabel: '',
                soldProduct: [],
                dataLabel: '',
                data: [],
                backgroundColor: '#ADAEB1',
                hoverBackgroundColor: '#48C6B9'
            }]
        },
        options: {
            legend: {
                display: false
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        maxTicksLimit: 8,
                        userCallback: function (value, index, values) {
                            value = value.toString();
                            value = value.split(/(?=(?:...)*$)/);
                            value = value.join(',');
                            var currency_code = ' ₩'
                            if ($('.graph-ajaxload-context').data('currency-code') && $('.graph-ajaxload-context').data('currency-code') != 'None') {
                                currency_code = $('.graph-ajaxload-context').data('currency-code')
                            }
                            return value + ' ' + currency_code;
                        }
                    },
                }]
            },
            tooltips: {
                mode: 'label',
                callbacks: {
                    label: function (tooltipItem, data) {
                        var soldProduct = data.datasets[tooltipItem.datasetIndex].soldProduct[tooltipItem.index];
                        var soldProductLabel = data.datasets[tooltipItem.datasetIndex].soldProductLabel;
                        var dataPro = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                        var dataLabel = data.datasets[tooltipItem.datasetIndex].dataLabel;
                        return [soldProductLabel + ':' + soldProduct, dataLabel + ':' + dataPro + ' ₩',];
                    }
                }
            }
        }
    });
}

$(document).on('click', '.showgraph', function (e) {
    $('.graph-year-earning').trigger('change');
});
/** Graph End Here */