HTML/Chart JS从Python Flask反序列化JSON



我正试图将一个对象返回到ChartJS应用程序。数据最初来自熊猫的数据帧。

这就是生成的原始对象。

{'datasets': [{'label': 'Door_08', 'data': [{'x': Timestamp('2018-10-23 00:22:43'), 'description': 'Stats: PSN:17019 PNR:0 PER:0 BFL:0 MID:17365 UER:0 WSC:1 NCL:0 NIN:0 NWI:0 WCC:1 CCC:1 LRS:-65 RLC:1145256517', 'y': 1}, ...

然而,熊猫的时间戳出现了一些问题。因此,我通过将对象转换为JSON来处理它,这是从这个答案中得到的。

现在看起来:

{"datasets": [{"label": "Door_08", "data": [{"x": "2018-10-23 00:22:43", "description": "Stats: PSN:17019 PNR:0 PER:0 BFL:0 MID:17365 UER:0 WSC:1 NCL:0 NIN:0 NWI:0 WCC:1 CCC:1 LRS:-65 RLC:1145256517", "y": 1}, ...

然而,我仍然无法看到我的图表。检查页面:

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: "{"datasets": [{"label": "Door_08", "data": [{"x": "2018-10-23 00:22:43", "description": "Stats: PSN:17019 PNR:0 PER:0 BFL:0 MID:17365 UER:0 WSC:1 NCL:0 NIN:0 NWI:0 WCC:1 CCC:1 LRS:-65 RLC:1145256517", "y": 1}, 

所以我的猜测是它没有被正确解码?

这就是我获取对象的方式:

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: "{{ object_returned }}",

我的字符集:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>{{ title }}</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
</head>

和我的Flask后端:

@app.route('/logs', methods=['GET', 'POST'])
def eventlogs():
# Do something
return render_template('logs.html', error=error, form=form, object_returned=object_returned)

如何正确地反序列化对象?

将tojson过滤器应用于object_returned:

var myChart = new Chart(ctx, {
type: 'line',
data: "{{ object_returned|tojson|safe }}",
...

python返回的数据是类类型"dict",而不是json。

通过:使其成为HTML/Java中的json

var myVariable = {{ object_returned | tojson }};

引号被删除了,因为它使它成为一个字符串。

最后:

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: myVariable,

最新更新