Python Plotly.offline plot output_type=&x27；分区'；不在HTML内部工作-如何将绘图嵌入HTML_Python_Html_Flask_Plotly

Python Plotly.offline plot output_type=&x27；分区'；不在HTML内部工作-如何将绘图嵌入HTML

python html flask

Python Plotly.offline plot output_type=&x27；分区'；不在HTML内部工作-如何将绘图嵌入HTML,python,html,flask,plotly,Python,Html,Flask,Plotly,我创建了一个简单的Flask应用程序，它呈现了一个模板“index.html”，在这个html中，我试图将各种绘图作为一种仪表板样式的网页与其他内容一起列出。我知道Flask和Dash的基本知识，但我不使用Dash，因为我想对HTML/CSS有更多的控制，因此使用Flask创建一个网站，使用Plotly嵌入图形到目前为止，我还没有看到任何官方文档或media.com之类的文章。我得到的最接近的答案是：但是，当我运行我的应用程序并在localhost中启动浏览器时，它不起作用。取而代之的是，它

我创建了一个简单的Flask应用程序，它呈现了一个模板“index.html”，在这个html中，我试图将各种绘图作为一种仪表板样式的网页与其他内容一起列出。我知道Flask和Dash的基本知识，但我不使用Dash，因为我想对HTML/CSS有更多的控制，因此使用Flask创建一个网站，使用Plotly嵌入图形

到目前为止，我还没有看到任何官方文档或media.com之类的文章。我得到的最接近的答案是：

但是，当我运行我的应用程序并在localhost中启动浏览器时，它不起作用。取而代之的是，它只是给了我很多文本，这些文本很明显是一个生动的图形，但它并没有变成一个图形

这里是我所有的py/html/css，即使导航栏的内容不相关；以防万一（我还在学习，所以我相信会有更好的方法来做事情……）

谢谢你的帮助

DataFrame类，它获取最新的冠状病毒数据并以熊猫的形式返回。DataFrame：

import pandas as pd
import requests


    class DataFrame:
        """
        Class which grabs the data live from the ECDC and returns it in a pandas dataframe
        """

        def __init__(self):
            """
            Creating the pandas dataframe of the ECDC JSON data
            """
            self.url = "https://opendata.ecdc.europa.eu/covid19/casedistribution/json"
            self.file = requests.get(self.url).json()
            self.file = self.file['records']
            self.df = pd.DataFrame(data=self.file)

        def converter(self):
            """
            Converting the dtypes from object to int for ints, and date to date
            Also renames the columns to more visual-friendly names
            :return: None
            """
            self.df['cases'] = self.df['cases'].astype(int)
            self.df['deaths'] = self.df['deaths'].astype(int)
            self.df['popData2018'] = self.df['popData2018'].astype(str).replace('', 0).astype(int)
            self.df['dateRep'] = self.df['dateRep'].to_timestamp
            cols_rename = 'date day month year cases deaths country geo_id country_id population continent'.split()
            cols_rename = [s.capitalize() for s in cols_rename]
            self.df.columns = cols_rename

        def return_df(self):
            """
            :return: pandas DataFrame
            """
            self.converter()
            return self.df

app.py

from plotly.offline import plot
import plotly.graph_objects as go
from dataframe.dataframe import DataFrame
from flask import Flask, render_template, redirect, request, url_for

app = Flask(__name__)


def graph_maker():
    df = DataFrame().return_df()
    data = []

    for continent in df['Continent'].unique():
        df_filt = df[df['Continent'] == continent]
        data.append(go.Scatter(x=df_filt["Cases"],
                               y=df_filt["Deaths"],
                               mode='markers',
                               text=df_filt['Country'],
                               name=continent))

    layout = go.Layout(title="Deaths (Y) v Cases (X) by continent")

    fig = go.Figure(data=data, layout=layout)

    return plot(figure_or_data=fig,
                include_plotlyjs=False,
                output_type='div')


@app.route('/')
def index():
    graph = graph_maker()
    return render_template('index.html',
                           graph=graph)


if __name__ == '__main__':
    app.run(debug=True)

index.html

{% extends "navbar.html" %}
<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="..\static\master.css">
    <link href="https://fonts.googleapis.com/css2?family=Maven+Pro&display=swap" rel="stylesheet">
    <!-- Plotly.js -->
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

</head>
{% block nbar %}
<body>
<div class="global-box" id="global-stats">
    <h1>Global charts</h1>
    <p>Title here</p>
    <ul class="global-box-ul">
        <li class="global-box-ul-li">
            {{ graph }}
        </li>
        <li class="global-box-ul-li">
            Another chart here
        </li>
    </ul>
</div>
</body>
{% endblock %}

谢谢你的帮助

我已经解决了这个问题

简而言之：

创建图表

调用

pyo.plot（）

作为通过图的正常调用，

output\u type='div'

和

include\u plotlyjs=False

通过

标记（）

（从flask导入）将该输出传递给变量

让

标记（变量）

像表单一样通过

render\u模板

使用

{{jinja template}}

首先，像平常一样创建绘图图表。我不会给出一个完整的例子，但只是重点。我在函数中创建图表，以便在必要时导入并在多个页面中使用。在这种情况下，这是必要的，因为图表必须分配给一个变量

def my_bar_chart():
    *snip irrelevant*
    my_bar_chart = pyo.plot(fig, output_type='div', include_plotlyjs=False)
    return Markup(my_bar_chart)

现在，将您的函数导入到app.py/中，无论您的视图位于何处，并通过渲染模板传递它，例如，您可以使用任何表单

以下是一个例子：

def my_page():
    my_bar_chart_var = my_bar_chart()
    return render_template('my_page.html',
                            bar_chart_1=my_bar_chart_var)

然后在该页面的html上，只需在jinja模板中通过

条形图1

，如下所示：

{{ bar_chart_1 }}