如何将Django视图返回值传入JavaScript更新buildchart函数的图表数据

一共4个基础步骤，跟着操作就能完成：

步骤1：修改Django的views函数，返回标准JSON格式 #

你原来的view直接返回数值前端无法识别，需要改成如下写法：

from django.http import JsonResponse

def order(request):
    # 这里保留你原来的计算逻辑，得到整数结果a
    a = 你计算出来的整数值
    # 以JSON格式返回数值，键名后续要对应使用
    return JsonResponse({"order_value": a})

步骤2：配置接口路由 #

打开你对应app下的urls.py文件，新增一条路由规则，让前端可以请求到这个接口：

from django.urls import path
from . import views # 导入你当前app的views

urlpatterns = [
    # 你原有已配置的路由不用修改，新增下面这一条即可
    path('get-order-value/', views.order, name='get_order_value'),
]

步骤3：修改JS代码，通过AJAX请求动态获取数据后渲染图表 #

原来的buildchart函数不能写死数据，需要先请求后端拿到最新值再生成图表，修改后的JS代码如下：

'use strict';
$(document).ready(function() {
    buildchart()
    $(window).on('resize', function() {
        buildchart();
    });
    $('#mobile-collapse').on('click', function() {
        setTimeout(function() {
            buildchart();
        }, 700);
    });
});

function buildchart() {
    // 先发起请求拿后端的order数值
    $.ajax({
        url: '/get-order-value/', // 填写你上一步配置的路由地址，有路由有前缀要补全
        method: 'GET',
        success: function(res) {
            // 请求成功后拿到返回的order_value，替换原来的固定值60
            var order_num = res.order_value;
            // 生成图表
            var graph = Morris.Donut({
                element: 'chart-pie-moris',
                data: [
                    {
                        value: order_num, // 这里替换为动态获取的数值
                        label: 'Order'
                    },
                    {
                        value: 20,
                        label: 'Stock'
                    },
                    {
                        value: 10,
                        label: 'Profit'
                    },
                    {
                        value: 5,
                        label: 'Sale'
                    }
                ],
                // 你原有剩余的图表配置直接往下写即可，不用修改
                ......
            })
        },
        error: function() {
            // 请求失败时使用默认值，避免图表无法加载失败
            console.log("获取订单数值失败，使用默认值60")
            var graph = Morris.Donut({
                element: 'chart-pie-moris',
                data: [
                    {
                        value: 60,
                        label: 'Order'
                    },
                    {
                        value: 20,
                        label: 'Stock'
                    },
                    {
                        value: 10,
                        label: 'Profit'
                    },
                    {
                        value: 5,
                        label: 'Sale'
                    }
                ],
                ......
            })
        }
    })
}

步骤4：测试验证 #

启动Django服务，刷新页面查看图表中Order对应的占比，确认和你计算出的数值一致即可。

如果你还要替换Stock、Profit等其他数值，只需要在view里把所有需要的数值都放在JsonResponse中返回，ajax中对应替换数值即可，逻辑完全一致。

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