Question

我正在尝试将多个绘图离线图嵌入到页面上不同位置的HTML页面中。我在后端使用烧瓶。目前，我无法更改绘图离线绘图返回的属性，以更改HTML页面上的位置，宽度和高度。我是前端开发概念的新手，所以原谅我的无知。

我使用下面的测试代码来创建div plot。

from plotly.offline import plot
import plotly.graph_objs as go


def plot_test():
    months = ['Jan', 'Feb', 'Mar']
    user = [10,50,30]
    t20h = [17, 46, 39]


    trace1 = go.Scatter(x= months, y=user, mode='lines+markers', name="OHR")
    trace2 = go.Scatter(x= months, y=t20h, mode='lines+markers', name="T20H")
    data = [trace1, trace2]

    layout = go.Layout(title='Test', xaxis=dict(title='Months'), yaxis=dict(title='Test'))
    fig = go.Figure(data=data, layout=layout)
    div_output = plot(fig, output_type='div', include_plotlyjs=False)

    return div

以下代码在我的HTML中呈现结果

from plot_test import plot_test

@app.route('/')
def home():
    plotly_graph = plot_test()
    return render_template("index.html", plotly_graph=Markup(plotly_graph))

以下是我的HTML。目前情节得到了创作，但却处于其他一切的顶端。我所有的其他按钮。

<!DOCTYPE html>
<html>
    <head>
        <title>Intro</title>
        <link href="static/index_style.css" rel="stylesheet">
    </head>
    <body>
        <div id="home">
            <form action="/" method="GET">
                <input type="submit" class="btn btn-default>" value="HOME" id="home-btn">
            </form>
        </div>
        <div id="logout">
            <form action="/logout" method="GET">
                <input type="submit" class="btn btn-default>" value="LOGOUT" id="logout-btn">
            </form>
        </div>
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
        {{ plotly_graph }}
        <!-- errors -->
        <!-- {% if error %}
            <p class="error"><strong>Error:</strong> {{ error }}</p>
        {% endif %}
         -->
        <!-- messages -->
        <!-- {% for message in get_flashed_messages() %}
            {{ message }}
        {% endfor %} -->

    </body>
</html>

Answer 1

我使用了一种稍微不同的方法：

（简化的）

在我的python代码中，我返回了fig而不是剧情本身
在HTML中，我创建了一个带id的div（'div_name'
在Javascript中，通过API调用接收数据来重新创建情节然后我只需要添加Javascript：Plotly.plot（“div_name”，fig [（“data]，fig [”layout“]。

通过这种方式，您可以更灵活地为div或布局本身的width-height参数尝试不同的大小调整方法。

使用flask填充HTML页面的多个绘图离线图<div>

1 个答案: