Django中通过AJAX提取Survey表数据实现动态更新图表的实现方法

一、后端接口开发 #

1. 编写统计数据视图 #

在你的应用views.py中添加如下代码，用于统计性别分布数据并返回JSON格式结果：

from django.http import JsonResponse
from django.db.models import Count
from .models import Survey

def get_gender_statistics(request):
    # 分组统计不同性别的用户数量
    gender_count = Survey.objects.values('gender').annotate(total=Count('id'))
    male_num = 0
    female_num = 0
    for item in gender_count:
        if item['gender'] == 'Male':
            male_num = item['total']
        elif item['gender'] == 'Female':
            female_num = item['total']
    return JsonResponse({
        "valid": True,
        "data": [male_num, female_num]
    })

2. 配置路由 #

在应用的urls.py中添加路由映射，对应前端请求的URL名称：

from django.urls import path
from . import views

urlpatterns = [
    # 你原有其他路由
    path('gender-chart/', views.get_gender_statistics, name='pie-chart'),
]

二、前端页面逻辑改造 #

首先在模板页面中添加图表渲染容器：

<canvas id="myChart" width="400" height="200"></canvas>

然后替换你原有JS代码为如下内容，实现数据请求、图表渲染和定时更新逻辑（需提前在页面引入jQuery和Chart.js的本地资源）：

// 全局存储图表实例
let genderChart = null;

// 定义图表更新函数
function refreshChart() {
    $.ajax({
        type: 'GET',
        url: "{% url 'pie-chart' %}",
        success: function (res) {
            if (res.valid) {
                const chartData = {
                    labels: ['男', '女'],
                    datasets: [{
                        label: '性别分布',
                        backgroundColor: ['rgb(255, 99, 132)', 'rgb(54, 162, 235)'],
                        borderColor: ['rgb(255, 99, 132)', 'rgb(54, 162, 235)'],
                        data: res.data
                    }]
                };
                const chartConfig = {
                    type: 'bar',
                    data: chartData,
                    options: {}
                };
                // 图表已存在则更新数据，不存在则初始化
                if (genderChart) {
                    genderChart.data = chartData;
                    genderChart.update();
                } else {
                    genderChart = new Chart(document.getElementById('myChart'), chartConfig);
                }
            }
        },
        error: function (err) {
            console.log('数据请求失败', err);
        }
    })
}

// 页面加载完成后执行
$(document).ready(function () {
    // 首次加载图表
    refreshChart();
    // 每5秒刷新一次数据，可根据需求调整间隔时长
    setInterval(refreshChart, 5000);
})

三、原代码问题说明 #

1. 原有AJAX请求和图表渲染逻辑没有关联，请求拿到的返回值没有更新到图表配置中
2. 没有设置定时拉取逻辑，无法实现数据库变动后图表自动同步
3. 直接在模板中写data: {{gender|safe}}是页面渲染时的一次性静态数据，无法获取数据库最新内容

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