在 Flask 应用程序中通过 jquery (getjson) 在字典中发送 Plotly 图表

Posted 2023-05-08

【中文标题】在 Flask 应用程序中通过 jquery (getjson) 在字典中发送 Plotly 图表

【英文标题】：Sending Plotly charts in a dictionary via jquery (getjson) in a Flask app

【发布时间】：2021-09-16 20:10:48

【问题描述】：

这在我的 Flask 应用中运行良好：

@app.route('/cb', methods=['POST', 'GET'])
def cb():
    x = flask.request.args.get('data')
    fig = my_plotly_fig(x)
    return json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)

在我的 html 中使用以下脚本

<script>
    function my_change(val) Plotly.newPlot('my-chart', val, )
    function cb(selection) 
        $.getJSON('/cb', 'data': selection, function (result) my_change(result))
    
</script>

但如果我想在一个字典中发送多个图，它就不起作用。我试过了：

@app.route('/cb', methods=['POST', 'GET'])
def cb():
    x = flask.request.args.get('data')
    fig1, fig2 = my_plotly_fig1(x), my_plotly_fig2(x)
    fig1, fig2 = json.dumps(fig1, cls=plotly.utils.PlotlyJSONEncoder), json.dumps(fig2, cls=plotly.utils.PlotlyJSONEncoder)
    return 'fig1': fig1, 'fig2': fig2

在我的 html 中使用脚本

<script>
    function my_change(val) Plotly.newPlot('my-chart', val, )
    function cb(selection) 
        $.getJSON('/cb', 'data': selection, function (result) my_change(result.fig1))
    
</script>

任何帮助将不胜感激！

【问题讨论】：

我不是 python 开发人员，但我认为您需要在整个响应中使用json.dumps()，而不是每个单独的属性。

谢谢！我也试过这个（没有成功）。如果我在上面的示例中只使用字符串，它可以正常工作。只需使用 Plotly 图表就可以了。

虽然不是答案。我建议你使用Plotly JS在前端创建图表，而不是从后端发送图表数据。

谢谢@Ram！我认为这是有道理的。

【参考方案1】：

from flask import Response
@app.route('/cb', methods=['POST', 'GET'])
def cb():
    x = flask.request.args.get('data')
    fig1, fig2 = my_plotly_fig1(x), my_plotly_fig2(x)
    fig1, fig2 = json.dumps(fig1, cls=plotly.utils.PlotlyJSONEncoder), json.dumps(fig2, cls=plotly.utils.PlotlyJSONEncoder)
    return Response(mimetype="application/json", response=json.dumps('fig1': fig1, 'fig2': fig2), status=200)

<script>
    function my_change(val) Plotly.newPlot('my-chart', val, )
    function cb(selection) 
        $.getJSON('/cb', 'data': selection, function (result) my_change(result.fig1))
    
</script>

【讨论】：

非常感谢，@Matteo！但不幸的是，它似乎不起作用。我也需要更改脚本吗？

你能打印出这行json.dumps('fig1': fig1, 'fig2': fig2)的结果吗？

是的。开头是这样的："fig1": "\"data\": [\"domain\": \"x\": [0.0, 1.0], \"y\": [0.0, 1.0], \"hovertemplate\": \"Status=%label<extra></extra>\", \"labels\": [\

我已经更新了我的回复，现在在你的 json 中有两个对象，fig1 : 和 fig2: ，所以在你的 jquery 请求中你必须通过 result.fig1 或 result 访问它们.fig2

谢谢。是的，这就是我尝试过的方式（如我的问题中所述）。不幸的是，它似乎仍然不起作用:(