如何将Heroku Postgres数据正确传递给Chart.js散点图使用

你遇到的报错是因为Python原生字典的序列化格式和JavaScript对象语法不兼容，用以下方案处理即可，操作非常简单：

方案1：后端预处理（推荐，效率更高） #

直接用Python内置的json模块把数据转成标准JSON格式再传给模板，避免语法兼容问题：

1. 后端Python代码修改如下：

import json

# 原有SQL查询逻辑不变
cursor.execute("SELECT dosage, efficacy FROM med_table")
rows = cursor.fetchall()

# 构造符合散点图要求的字典列表，再转成JSON字符串
xy_values = json.dumps([{"x": row[0], "y": row[1]} for row in rows])
# 把xy_values传入模板即可，和你之前传dos、eff的逻辑一致

2. 前端JS直接引用即可，不需要额外处理：

var xyValues = {{xy_values|safe}};

这个处理完的数据完全符合Chart.js散点图的格式要求，直接赋值给数据集的data属性就能用。

方案2：前端处理（无需修改后端原有逻辑） #

如果你不想调整后端代码，也可以直接用之前已经传入的dos和eff数组在前端拼接出需要的格式：

// 先拿到原有两个数组
const dosArr = {{dos|safe}};
const effArr = {{eff|safe}};
// 遍历拼接成散点图需要的xy对象数组
const xyValues = dosArr.map((xVal, index) => ({
  x: xVal,
  y: effArr[index]
}));

两种方案都可以稳定运行，优先选方案1，后端一次性处理完，前端可以直接复用，后续有其他需要对象格式的图表也可以用相同逻辑处理。

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