代码之家 › 专栏 › 技术社区 › Nikko

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

chart.js json html python javascript

Nikko · 技术社区 · 6 年前

{'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来处理它,从 this answer

现在看来:

{"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: "{&#34;datasets&#34;: [{&#34;label&#34;: &#34;Door_08&#34;, &#34;data&#34;: [{&#34;x&#34;: &#34;2018-10-23 00:22:43&#34;, &#34;description&#34;: &#34;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&#34;, &#34;y&#34;: 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>

我的烧瓶后端:

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

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

2 回复 | 直到 6 年前

jordiburgos 6 年前

将tojson过滤器应用于 object_returned :

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

Nikko 6 年前

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,

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前