无需页面刷新即可刷新图表的最佳方式（Python Django，ajax）

Question

有点一般性的问题 - 我正在寻找根据用户选择刷新 Django 页面上的图形的方法。该页面有一个图表，几个下拉框，您可以在其中 select 参数和一个刷新按钮。目前，我可以通过 ajax 将 selections 捕获到我的 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 */

无需页面刷新即可刷新图表的最佳方式（Python Django，ajax）

Best way to refresh graph without page refresh (Python Django, ajax)

python

django

ajax

refresh

graph