时间戳

首页 > 解决方案 > HTML/Chart JS 从 Python Flask 反序列化 JSON

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

问题描述

我正在尝试将对象返回到 Chart JS 应用程序。数据最初来自 pandas 中的数据框。

所以这是生成的原始对象。

{'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)

我将如何正确反序列化对象？

标签： javascriptpythonhtmljsonchart.js

解决方案

将 tojson 过滤器应用于object_returned：

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

推荐阅读