Django中Chart.js图表无法显示求助（数据正常无报错）

问题排查与修复方案 #

1. 修正脚本加载顺序（核心问题） #

你当前先加载了包含图表逻辑的main.js，之后才引入Chart.js库，这会导致执行new Chart()时Chart对象还未定义，直接导致图表无法初始化。调整脚本顺序：

<!-- 先加载Chart.js库 -->
<script type="text/javascript" src="{% static 'js/Chart.min.js' %}"></script>
<!-- 再加载业务逻辑脚本 -->
<script type="text/javascript" src="{% static '/dashboard/js/main.js' %}"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>

2. 适配Chart.js版本语法 #

如果你的Chart.js是v3及以上版本，原代码中scales.yAxes的写法已被废弃，需改为新语法：

options: {
  scales: {
    y: { // 替换原yAxes数组写法
      beginAtZero: true
    }
  }
}

不确定版本的话，可以在控制台执行console.log(Chart.version)查看。

3. 确保数据为数值类型 #

Django的Sum聚合返回Decimal类型，序列化为JSON后可能变成字符串，Chart.js无法识别为数值：

• 后端修复：用FloatSum直接返回浮点型

from django.db.models import FloatSum

@require_http_methods(['GET'])
def measures_data(request):
    measures = Measures.objects.values('hospital__name').annotate(
        total_mortality_rate=FloatSum('mortality_rate')
    ).order_by('hospital__name')
    return JsonResponse(list(measures), safe=False)

• 前端修复（备选）：在数据处理时转换类型

mortalityRates.push(parseFloat(measure.total_mortality_rate));

4. 为Canvas设置明确尺寸 #

未设置宽高的Canvas可能无法正确渲染图表，通过CSS或标签属性设置：

#motalityRate {
  width: 400px !important;
  height: 300px !important;
}

或直接在标签上定义：

<canvas id="motalityRate" width="400" height="300"></canvas>

5. 检查控制台隐藏错误 #

务必打开浏览器开发者工具（F12）的Console面板，查看是否有未注意到的错误（比如Chart is not defined、数据格式异常等），这是前端问题排查的核心手段。

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