Chartjs接收Django变量时两位数被拆分为单个数字问题求解

问题根源 #

你当前的home_runs定义方式是将所有得分拼接为单个连续字符串，而ChartJS的data参数要求接收数组类型。当你传入字符串时，ChartJS会默认将字符串按单个字符拆分，因此两位数的数值会被拆为两个独立的数字项，这就是你遇到问题的核心原因。

解决方案 #

方案1：视图层预先序列化（推荐）

在Django视图中提前将数据序列化为JSON格式，避免模板拼接出错：

import json
# 你的视图函数内
home_runs = [game.runs for game in all_games.home_ten]
away_runs = [game.runs for game in all_games.away_ten]
# 传入模板的上下文新增以下字段
return render(request, '你的模板文件名.html', {
    # 你原来的其他上下文参数
    'home_runs_json': json.dumps(home_runs),
    'away_runs_json': json.dumps(away_runs)
})

模板中直接赋值即可，不需要额外加引号，记得加safe过滤器避免Django自动转义特殊字符：

var home_runs = {{ home_runs_json|safe }};
var away_runs = {{ away_runs_json|safe }};

方案2：模板层直接构建数组

如果不想修改视图代码，也可以直接在模板中生成正确的数组格式：

var home_runs = [{% for game in all_games.home_ten %}{{ game.runs }}{% if not forloop.last %},{% endif %}{% endfor %}];
var away_runs = [{% for game in all_games.away_ten %}{{ game.runs }}{% if not forloop.last %},{% endif %}{% endfor %}];

额外注意 #

你原来的代码给变量套了单引号，会强制把所有输出内容转为字符串，修改后一定要去掉这层多余的单引号，保证变量是数组类型。

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