Django中使用Chart.js绘制图表坐标异常且出现多余点位问题咨询

问题原因 #

导致你遇到渲染错误、点位不符、异常新增点位的核心原因有三个：

• 1. main_graph_points被错误定义为字符串类型
     你在代码中添加了外层双引号：var main_graph_points = "{{ main_graph_points }}";，这会让Django渲染后的字典内容变成普通字符串。此时Object.keys(main_graph_points)返回的是字符串每个字符对应的索引（0、1、2……），Object.values返回的是每个单个字符，完全不符合你的预期数据，这是点位不符的核心原因。
• 2. 大量错误点位导致渲染卡顿，看起来像点位持续新增
     你传入的字典转成字符串后长度达数百位，生成的错误点位有上百个，Chart.js渲染这些点位需要较长时间，看起来就像点位在不停凭空新增，直到所有错误点位渲染完成或者你终止进程。
• 3. Django模板默认转义、配置项位置错误
     就算去掉外层引号，Django默认会对输出内容做HTML转义，同时你的options配置被错误放在了data字段内部，坐标轴配置不会生效。

修复方案 #

后端修改（Django视图层） #

先把字典序列化为JSON字符串再传入模板：

import json

def your_view_func(request):
    # 你的原始点位字典
    main_graph_points = {20: 59.96601343154907, 24: 59.89738027254739, 28: 59.9285344282786,288: 59.849180777867616}
    return render(request, "你的模板文件名.html", context={
        "main_graph_points_json": json.dumps(main_graph_points)
    })

前端代码修改 #

替换原有main_graph_points定义，修正配置项位置：

// 替换原有变量定义，加safe过滤器禁用Django转义后解析为JS对象
var main_graph_points = JSON.parse('{{ main_graph_points_json|safe }}');

var graphData = {
    type: 'line',
    data: {
        labels: Object.keys(main_graph_points),
        datasets: [{
            label: 'main graph',
            data: Object.values(main_graph_points),
            backgroundColor: [
                'rgba(73, 198,230, 0.5)',
            ],
            borderWidth: 1
        }]
    },
    // options移到和type、data平级的位置
    options:{
        scales: {
            xAxes: [{
                type: 'category',
            }]
        }
    },
}

var myChart = new Chart(ctx, graphData);

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