通过 Flask 框架将 Dash Barchart 插入 HTML 页面

Question

I'm trying to insert a barchart into my website which has been written in Flask.我正在尝试在我的网站中插入一个用 Flask 编写的条形图。 Here is what my app.py looks like:这是我的 app.py 的样子：

from flask import Flask, render_template
app = Flask(__name__)

@app.route("/")
def index():
    return render_template('index.html', title="Mainpage")

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

Here is what my barchart looks like (chart.py):这是我的条形图的样子（chart.py）：

# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[

    dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
            ],
        }
    )
])

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

And here is what my html looks like (index.html):这是我的 html 的样子（index.html）：

<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif}
.w3-bar,h1,button {font-family: "Montserrat", sans-serif}
.fa-anchor,.fa-coffee {font-size:200px}
</style>
<body>

<!-- Navbar -->
<div class="w3-top">
  <div class="w3-bar w3-red w3-card w3-left-align w3-large">
    <a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-red" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
    <a href="#" class="w3-bar-item w3-button w3-padding-large w3-white">Home</a>
    <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 1</a>
    <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 2</a>
    <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 3</a>
    <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 4</a>
  </div>

  <!-- Navbar on small screens -->
  <div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium w3-large">
    <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 1</a>
    <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 2</a>
    <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 3</a>
    <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 4</a>
  </div>
</div>

<!-- Header -->
<header class="w3-container w3-red w3-center" style="padding:128px 16px">
  <h1 class="w3-margin w3-jumbo">START PAGE</h1>
  <p class="w3-xlarge">Template by w3.css</p>
  <button class="w3-button w3-black w3-padding-large w3-large w3-margin-top">Get Started</button>
</header>

<!-- First Grid -->
<div class="w3-row-padding w3-padding-64 w3-container">
  <div class="w3-content">
    <div class="w3-twothird">
      <h1>Bar Chart</h1>

        <h2>Insert bar chart here</h2>

  </div>
</div>

</body>
</html>

I want a site where I can embed dash or seaborn or plotly or possibly d3 charts onto one page.我想要一个网站，我可以在一个页面上嵌入 dash 或 seaborn 或 plotly 或可能的 d3 图表。 With the dash chart, I'm hoping to make a site that looks something like this:使用破折号图，我希望制作一个看起来像这样的网站：

How would I go about doing this?我该怎么做呢？

EDIT 1 05/04/19.编辑 1 05/04/19。 Here is what my file structure looks like:这是我的文件结构：

Answer 1

import dash
import dash_core_components as dcc
import dash_html_components as html

from flask import Flask, render_template

server = Flask(__name__)

@server.route('/name')
def name():
    return render_template('index.html')

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

layout = """
<!DOCTYPE html>
<html lang="en">
<title>{%title%}</title>
{%favicon%}
{%metas%}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
{%css%}
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif}
.w3-bar,h1,button {font-family: "Montserrat", sans-serif}
.fa-anchor,.fa-coffee {font-size:200px}
</style>
<body>

<!-- Navbar -->
<div class="w3-top">
  <div class="w3-bar w3-red w3-card w3-left-align w3-large">
    <a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-red" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
    <a href="#" class="w3-bar-item w3-button w3-padding-large w3-white">Home</a>
    <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 1</a>
    <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 2</a>
    <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 3</a>
    <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link 4</a>
  </div>

  <!-- Navbar on small screens -->
  <div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium w3-large">
    <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 1</a>
    <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 2</a>
    <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 3</a>
    <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 4</a>
  </div>
</div>

<!-- Header -->
<header class="w3-container w3-red w3-center" style="padding:128px 16px">
  <h1 class="w3-margin w3-jumbo">START PAGE</h1>
  <p class="w3-xlarge">Template by w3.css</p>
  <button class="w3-button w3-black w3-padding-large w3-large w3-margin-top">Get Started</button>
</header>

<!-- First Grid -->
<div class="w3-row-padding w3-padding-64 w3-container">
  <div class="w3-content">
    <div class="w3-twothird">
      <h1>Bar Chart</h1>

        <h2>Insert bar chart here</h2>
        {%app_entry%}
  </div>
</div>
  {%config%}
  {%scripts%}
  {%renderer%}
</body>
</html>
"""

app = dash.Dash(__name__, external_stylesheets=external_stylesheets, server=server, index_string=layout)

app.layout = html.Div(children=[
    dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
            ],
            'layout': {
                'title': 'Dash Data Visualization'
            }
        }
    )
])

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

Answer 2

This is in no way the right way to do.这绝不是正确的做法。 But this might help you get thinking in the right direction or just get to think of some ideas?但这可能会帮助您朝着正确的方向思考，或者只是想出一些想法？ Take it with a grain of salt.把它和一粒盐一起吃。

I am not sure what the best/correct way of doing it is but, here are two way I could think of.我不确定这样做的最佳/正确方法是什么，但是，这是我能想到的两种方法。 Either you generate/export a png of your chart and then insert it in your html.要么生成/导出图表的 png，然后将其插入到 html 中。 OR you could just generate your JavaScript for the graph dynamically and then insert it.或者，您可以为图形动态生成 JavaScript，然后插入它。 So you would write out all the base code for you graph, and then just add the values for the bars.因此，您将为您的图形写出所有基本代码，然后只需添加条形的值。

通过 Flask 框架将 Dash Barchart 插入 HTML 页面

问题描述

2 个解决方案

解决方案1
5 2019-04-16 08:08:31

解决方案2
-2 2019-04-11 04:02:42

通过 Flask 框架将 Dash Barchart 插入 HTML 页面

问题描述

2 个解决方案

解决方案1 5 2019-04-16 08:08:31

解决方案2 -2 2019-04-11 04:02:42

解决方案1
5 2019-04-16 08:08:31

解决方案2
-2 2019-04-11 04:02:42