Django从PostgreSQL取数据生成饼图失败，求技术支持

核心问题排查与修复 #

1. 模型字段访问错误（最可能的根因） #

你的Progress模型中字段定义为PercentageDownload（驼峰命名），但视图里用obj.percentagedownload访问——这是典型的字段名不匹配错误。Django模型实例的字段访问必须严格对应模型中定义的名称。

修复后的视图代码：

# function to fetch data from progress table and use in Progress picharts on epidemiological_data page
def pie_chart(request):
    labels = []
    data = []
    print("视图已执行");
    queryset = Progress.objects.all()
    # 新增打印语句确认是否取到数据
    print(f"查询到数据条数：{queryset.count()}")
    for obj in queryset:
        labels.append(obj.name)
        # 修正字段访问，使用模型定义的驼峰名称
        data.append(obj.PercentageDownload)
    print("数据处理完成");

    return render(request, 'django_blog/epidemiological_data.html', {
        'labels': labels,
        'data': data,
    })

2. 模板中JS数组传递优化 #

当前用{{ data | safe }}传递数组存在格式风险，建议改用json_script标签实现安全的Python-JS数据传递：

修改HTML脚本部分：

<div class="progressCircles">
      <div id="container" style="width: 100%;">
          {% for label in labels %}
            <div class="chart-container">
              <canvas class="chart" id="pie-chart-{{ forloop.counter }}" style="width: 100%;"></canvas>
              <p class="chartText">{{ label }}</p>
            </div>
          {% endfor %}
      </div>
    </div>
<!-- 新增json_script标签传递数据 -->
{{ data|json_script:"chart-data" }}
{{ labels|json_script:"chart-labels" }}
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script>
  // 从json_script标签读取标准JSON格式数据
  var data = JSON.parse(document.getElementById('chart-data').textContent);
  var labels = JSON.parse(document.getElementById('chart-labels').textContent);
  var total = 100; 

  console.log("Labels:", labels);
  console.log("Data:", data);

  window.onload = function() {
    for (var i = 0; i < data.length; i++) {
      var chartId = 'pie-chart-' + (i + 1);
      var ctx = document.getElementById(chartId).getContext('2d');

      var percentage = data[i];
      var uncompletedPercentage = total - percentage;

      var dynamicLabels = [];
      if (percentage) {
        dynamicLabels.push(percentage + '%');
      }
      if (uncompletedPercentage) {
        dynamicLabels.push((100 - percentage) + '%');
      }

      var config = {
        type: 'pie',
        data: {
          datasets: [
            {
              data: [percentage, uncompletedPercentage],
              backgroundColor: ['#696969', '#D3D3D3'],
            }
          ],
          labels: dynamicLabels
        },
        options: {
          responsive: true,
          legend: {
            display: false
          }
        }
      };
      new Chart(ctx, config);
    }
  };
</script>

3. 确认URL路由配置 #

确保pie_chart视图已正确映射到页面URL，在项目/应用的urls.py中添加：

from django.urls import path
from . import views

urlpatterns = [
    path('epidemiological-data/', views.pie_chart, name='epidemiological_data'),
]

4. 验证数据库连接与数据 #

执行以下步骤确认数据可正常获取：

1. 运行python manage.py shell进入Django shell
2. 执行代码查询数据：

from your_app_name.models import Progress
# 替换your_app_name为实际应用名
print(Progress.objects.all())

• 如果能输出数据库中的数据，说明连接和模型无问题
• 如果报错，检查数据库配置是否正确，执行python manage.py makemigrations和python manage.py migrate确保模型已同步到数据库

额外检查点 #

• 查看浏览器控制台是否有JS报错，比如ctx为null（说明canvas元素ID不匹配）
• 检查CSS样式是否导致图表被隐藏，可临时移除.chart-container的border-radius: 50%测试显示效果

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