如何使用Ajax / JavaScript将Visualization返回烧瓶中并以html显示?

时间:2020-06-23 04:01:20

标签: javascript python html flask

@app.route('/Bar',methods=['POST','GET'])
def Bar():
        x=sns.lineplot(data.da["R&D Spend"],data.da["Profit"])
        return send_file(x)

现在我该怎么做。 由于我是编码新手,请简单回答。 请不要使用数据库。

const xhr=new XMLHttpRequest();
        xhr.open('POST','/Bar',true);
        xhr.getAllResponseHeaders();
        xhr.onprogress=function(){
        console.log('hello')
        }

        xhr.onload=function(){
document.getElementById('table1').innerHTML='<img src="this.responseText"';//Here I want to insert visualization
        }
        xhr.send();          
    }

1 个答案:

答案 0 :(得分:0)

Python代码

@app.route('/Bar',methods=['POST','GET'])
def Bar():
    import io
    import base64
    from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
    import matplotlib.pyplot as plt
    import seaborn as sns
    fig,ax=plt.subplots(figsize=(6,6))
    ax=sns.set(style="darkgrid")
    sns.lineplot(df.x,df.y)
    canvas=FigureCanvas(fig)
    img = io.BytesIO()
    fig.savefig(img)
    img.seek(0)
        return send_file(img,mimetype='img/png')

const xhr=new XMLHttpRequest();
              xhr.open('GET','/Bar',true);
              xhr.getAllResponseHeaders();
              xhr.onprogress=function(){
              }

              xhr.onload=function(){
                document.getElementById('table1').innerHTML='<img src="/Bar">';
                    
           
              }
            xhr.send();
            }