Question

我想在烧瓶Web服务器的一页上显示三个图表。对于每个图，我都有一个脚本标签，其中包含该特定图的脚本。我正在使用plotly.js来显示和创建图形。我已经确保显示图的代码有效，但是我将其重定向到其他页面，而我只想将所有图放在一个页面上。我下面的代码是我的烧瓶和一个图形的html代码的示例，同一html页面上的其他两个图形的格式大致相同。任何帮助，将不胜感激！

烧瓶代码

@app.route('/graph_select', methods=["GET", "POST"])
def graph_select():
    return render_template('datapage.html')


@app.route('/read_ph', methods=["GET", "POST"])
def ph_plot():
    if request.method == "POST":
        a = request.form.get('read_ph')
        ph_plot = all_plots.get_ph_data(a)
        time.sleep(2)
        return render_template('datapage.html', ph_plot=ph_plot)

HTML

<html>
  <body>

    <h1>Data Monitoring Station</h1>
    <h2>PH</h2>
       <form method="POST" action="read_ph" >
          <input name="read_ph" placeholder="Instances" type="text">
        </form>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>


  <script type="text/javascript">
    var trace1 = {
        x: {{ ph_plot.x_axis|safe }},
        y: {{ ph_plot.y_axis|safe }},
        type: 'scatter',
        name: 'Example'
    };

    var layout = {
        title: "PH Values",
        titlefont: {
                family: 'Poppins',
                size: 18,
                color: '#7f7f7f'
            },
        xaxis: {
            title: 'Time',
        },
        yaxis: {
            title: 'PH',
            range: [0,14]
        },
        margin: {
            l: 70,
            r: 40,
            b: 50,
            t: 50,
            pad: 4
        }
    };

var data = [trace1];
Plotly.newPlot("ph_div", data, layout);
</script>
    <hr>
    <h5> Return to main page <a href="/"class="button">RETURN</a></h5>
    <hr>

  </body>
</html>

在具有多个发布请求的网页上的发布请求上执行Javascript <SCRIPT>标签

0 个答案: