如何使用ajax获取到数据库中想要的数据，然后返回给饼状图里面？

Question

以下是我的代码，我想通过ajax获取到数据库中每个部门都加入了多少人的数据，然后再将这些数据插入到饼状图里面，该如何实现？
后端代码

def chart_pie(request):
    """构造饼图"""
    db_data_list = [
        {"value": 1048, "name": 'IT部门'},
        {"value": 735, "name": '美工部门'},
        {"value": 580, "name": '运营部门'},
        {"value": 484, "name": '财政部门'},
        {"value": 300, "name": '数据库部门'}
    ]

    result = {
        "status": True,
        "data": db_data_list
    }

    return JsonResponse(result)

前端代码

<script type="text/javascript">

        $(function(){
            initPie();
        })
function initPie() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('m3'));

        var option = {
  title: {
    text: '财政支出占比信息',
    subtext: '第一季度',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    bottom:0
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [], //后台获取
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

        $.ajax({
            url:"/chart/pie/",
            type:"get",
            dataType:"json",
            success: function(res){
                if (res.status){
                    option.series[0].data=res.data,
                    myChart.setOption(option)}}})

        myChart.setOption(option);
        }

数据库表

class UserInfo(models.Model):
    """员工表"""
    name = models.CharField(verbose_name="姓名", max_length=32)
    password = models.CharField(verbose_name="密码", max_length=64)
    age = models.IntegerField(verbose_name="年龄")
    # 在django约束
    gender_choices = (
        (1, "男"),
        (2, "女")
    )
    # 性别自动获取：obj.get_gender_display（）
    gender = models.SmallIntegerField(verbose_name="性别", choices=gender_choices)
    account = models.DecimalField(verbose_name="账户余额", max_digits=10, decimal_places=2, default=0)
    # create_time = models.DateTimeField(verbose_name="入职时间")
    create_time = models.DateField(verbose_name="入职时间")
    # obj.create_time.strftime("%Y-%m-%d")
    # null = True, blank = True, on_delete = models.SET_NULL 滞空
    # on_delete=models.CASCADE 级联删除
    depart = models.ForeignKey(verbose_name="部门", to="Department", to_field="id", on_delete=models.CASCADE)

class Department(models.Model):
    """部门表"""
    title = models.CharField(verbose_name="标题", max_length=32)

    def __str__(self):
        return self.title

Answer 1

该回答引用自GPT-3.5, 由博主 GISer Liu 编写：

好的，我们来详细分析并解决这个问题。用户希望通过AJAX从数据库中获取每个部门的人数数据，并将这些数据插入到饼状图中。我们将从后端和前端两个方面来解决这个问题。

后端代码

首先，我们需要修改后端代码，使其从数据库中获取每个部门的人数数据。我们可以使用Django的ORM来实现这一点。

from django.http import JsonResponse
from .models import UserInfo, Department

def chart_pie(request):
    """构造饼图"""
    # 获取每个部门的人数
    db_data_list = []
    departments = Department.objects.all()
    for department in departments:
        count = UserInfo.objects.filter(depart=department).count()
        db_data_list.append({"value": count, "name": department.title})

    result = {
        "status": True,
        "data": db_data_list
    }

    return JsonResponse(result)

前端代码

前端代码已经基本正确，我们只需要确保AJAX请求能够正确获取数据并更新饼状图。

<script type="text/javascript">
    $(function(){
        initPie();
    })

    function initPie() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('m3'));

        var option = {
            title: {
                text: '财政支出占比信息',
                subtext: '第一季度',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                bottom: 0
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [], // 后台获取
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        $.ajax({
            url: "/chart/pie/",
            type: "get",
            dataType: "json",
            success: function(res){
                if (res.status){
                    option.series[0].data = res.data;
                    myChart.setOption(option);
                }
            }
        });

        myChart.setOption(option);
    }
</script>

数据库表

数据库表的定义已经很完整，不需要修改。

class UserInfo(models.Model):
    """员工表"""
    name = models.CharField(verbose_name="姓名", max_length=32)
    password = models.CharField(verbose_name="密码", max_length=64)
    age = models.IntegerField(verbose_name="年龄")
    gender_choices = (
        (1, "男"),
        (2, "女")
    )
    gender = models.SmallIntegerField(verbose_name="性别", choices=gender_choices)
    account = models.DecimalField(verbose_name="账户余额", max_digits=10, decimal_places=2, default=0)
    create_time = models.DateField(verbose_name="入职时间")
    depart = models.ForeignKey(verbose_name="部门", to="Department", to_field="id", on_delete=models.CASCADE)

class Department(models.Model):
    """部门表"""
    title = models.CharField(verbose_name="标题", max_length=32)

    def __str__(self):
        return self.title

总结

1. 后端代码：修改后端代码，使用Django ORM从数据库中获取每个部门的人数数据，并返回JSON响应。
2. 前端代码：确保AJAX请求能够正确获取数据并更新饼状图。
3. 数据库表：数据库表的定义已经很完整，不需要修改。

通过以上步骤，您应该能够成功通过AJAX获取到数据库中每个部门的人数数据，并将这些数据插入到饼状图中。

如果该回答解决了您的问题，请采纳！如果没有，请私信联系或评论您的疑惑