Flask Plotly Dash 集成答案

【问题标题】：Flask Plotly Dash integrationFlask Plotly Dash 集成
【发布时间】：2022-01-17 21:44:09
【问题描述】：

我开始使用 Flask 和 Plotly Dash 创建基于 Web 的仪表板。我想知道是否可以在 Flask 应用程序中嵌入 Dash 组件。

【问题讨论】：

stackoverflow.com/questions/61869715/…, hackersandslackers.dev/plotly-dash-with-flask?

标签： python python-3.x flask plotly-dash dashboard

【解决方案1】：

如果在破折号中使用'px'，你可以使用这个方法解析它：

fig = px.bar(df, x='Fruit', y='Amount', color='City', 
      barmode='group')    graphJSON = 
json.dumps(fig,cls=plotly.utils.PlotlyJSONEncoder)    
return render_template('notdash.html', plot=graphJSON)

如果使用'go'：

data = [
        go.Bar(
            x=df['x'], # assign x as the dataframe column 'x'
            y=df['y']
        )
    ]

    graphJSON = json.dumps(data, cls=plotly.utils.PlotlyJSONEncoder)
    return render_template('notdash.html', plot=graphJSON)

对于前端在 HTML 的标题中添加这一行：

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"> 
</script>

您可以像在下面写下线条一样简单地绘制您的图形：

<div class = "divider py-1 text-center text-white bg-dark">Plotly data</div>
<div class="chart" id="linegraph">
    <script>
        var layout = { title : "", xaxis : {title: "Date+Time",dtick: 1,type: 
        'category' },
         yaxis :{title: "whatever"}}
        var graphs = {{plot | safe}};
        Plotly.plot('linegraph',graphs,layout);
    </script>

【讨论】：