堆栈内存溢出
  繁体   English   中英

为什么mpld3条形图显示一个python文件的“版本”，而不显示另一个？

[英]Why does mpld3 bar chart show with one “version” of a python file, and not with the other?

 原文  2019-08-05 20:47:40  7   1    python/ html/ matplotlib/ mpld3

问题描述

我有两个版本的python文件（如果能很好地描述它），旨在在网页上打印条形图（使用mpld3）。 一种版本有效，而另一种版本（可以根据需要打印条形图）不起作用。 具体来说，索引函数在每个python“版本”中返回的内容是不同的。 为什么一个“返回值”导致条形图打印而另一个却不打印？

（为简要说明我的程序应该做什么：SQLite3表中的数据被提取到python变量中，我想用它来使用mpld3创建条形图。条形图应在x轴上具有由癌症药物引起的不同副作用的名称，并且在y轴上应标出每种副作用的发生百分比。）

作为初学者，请原谅我的（可能是非常基本的）错误。 谢谢。

这是返回值有效并打印条形图的python代码。 现在返回的是包含生成的条形图的html： 

import os
import matplotlib.pyplot as plt
import numpy as np
import mpld3

from cs50 import SQL
from flask import Flask, flash, jsonify, redirect, render_template, 
request, session
from flask_session import Session
from tempfile import mkdtemp
from werkzeug.exceptions import default_exceptions, HTTPException, 
InternalServerError
import sqlite3


app = Flask(__name__)

app.config["TEMPLATES_AUTO_RELOAD"] = True

app.config["SESSION_FILE_DIR"] = mkdtemp()
app.config["SESSION_PERMANENT"] = False
app.config["SESSION_TYPE"] = "filesystem"
Session(app)

db = SQL("sqlite:///cancermeds.db")

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method=="POST":

        selection = request.form.get("cancerlist")
        if selection == "breast cancer":
            rows = db.execute("SELECT * FROM 'breast cancer'")
            for row in rows:
                keys = list(row.keys())
                del keys[16:19]
                print(keys)
                values = list(row.values())
                del values[16:19]
                print(values)

                fig, ax = plt.subplots()
                fig = plt.figure(figsize=(7,6))
                ax = plt.bar(keys, values, width=0.5)
                plt.xlabel("Side Effects")
                plt.ylabel("Percentages of Occurence of Side 
    Effects")
            plt.title("Bar Chart showing Side Effects of Breast 
Cancer Medication(s) With Their Corrresponding Percentages Of 
Occurence")
            fig = ax[0].figure
            bar_chart = mpld3.fig_to_html(fig)

    return '''<DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    </head>
    <body>''' + bar_chart + '''</body>
    </html>'''

else:
    return render_template("index.html")


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

以下代码不会创建我要创建的条形图，因为返回给该函数的内容不起作用，并且我不明白为什么。 这是代码： 

import os
import matplotlib.pyplot as plt
import numpy as np
import mpld3

from cs50 import SQL
from flask import Flask, flash, jsonify, redirect, render_template, 
request, session
from flask_session import Session
from tempfile import mkdtemp
from werkzeug.exceptions import default_exceptions, HTTPException, 
InternalServerError
import sqlite3


app = Flask(__name__)

app.config["TEMPLATES_AUTO_RELOAD"] = True

app.config["SESSION_FILE_DIR"] = mkdtemp()
app.config["SESSION_PERMANENT"] = False
app.config["SESSION_TYPE"] = "filesystem"
Session(app)

db = SQL("sqlite:///cancermeds.db")

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method=="POST":

        selection = request.form.get("cancerlist")
        if selection == "breast cancer":
            rows = db.execute("SELECT * FROM 'breast cancer'")
            for row in rows:
                keys = list(row.keys())
                del keys[16:19]
                print(keys)
                values = list(row.values())
                del values[16:19]
                print(values)

                fig, ax = plt.subplots()
                fig = plt.figure(figsize=(7,6))
                ax = plt.bar(keys, values, width=0.5)
                plt.xlabel("Side Effects")
                plt.ylabel("Percentages of Occurence of Side 
 Effects")
            plt.title("Bar Chart showing Side Effects of Breast Cancer Medication(s) With Their Corrresponding Percentages Of Occurence")
            fig = ax[0].figure
            bar_chart = mpld3.fig_to_html(fig)

           return render_template("breastcancer.html", bar_chart = 
bar_chart)

    else:
        return render_template("index.html")


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

这是我引用的breastcancer.html文件，应该在后面的代码的index函数中返回该文件： 

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial- 
scale=1, shrink-to-fit=no">
        <title>Chemotherapy Comparison Website</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min 
.css" rel="stylesheet">

    <link href="/static/favicon.ico" rel="icon">

    <link href="/static/styles.css" rel="stylesheet">

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <h2>
        Chemotherapy Comparison Website
    </h2>
    <h3>
        Breast Cancer Page
    </h3>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div id="chart-display-col" col="col-md-6">
                {{bar_chart}}
            </div>
            <div id="info-display-col" col="col-md-6">

            </div>
        </div>
    </div>
</body>

在上面显示的html代码中，通过输入{{bar_chart}}，我希望条形图在网页上显示。 相反，我得到的显示似乎是很多代码行。 我会在下面粘贴其中的一部分，对于没有全部发布，我们感到抱歉，因为有太多行，超出了此问题允许的最大正文尺寸： 

<style> </style> <div id="fig_el59641396267905660961816143295"> 
</div> <script> function mpld3_load_lib(url, callback){ var s = 
document.createElement('script'); s.src = url; s.async = true; 
s.onreadystatechange = s.onload = callback; s.onerror = function() 
{console.warn("failed to load library " + url);}; 
document.getElementsByTagName("head")[0].appendChild(s); } 
if(typeof(mpld3) !== "undefined" && mpld3._mpld3IsLoaded){ // 
already loaded: just create the figure !function(mpld3){ 
mpld3.draw_figure("fig_el59641396267905660961816143295", {"width": 
700.0, "height": 600.0, "axes": [{"bbox": [0.125, 
0.10999999999999999, 0.775, 0.77], "xlim": [-1.025, 16.025], 
"ylim": [0.0, 52.5], "xdomain": [-1.025, 16.025], "ydomain": [0.0, 
52.5], "xscale": "linear", "yscale": "linear", "axes": 
[{"position": "bottom", "nticks": 16, "tickvalues": null, 
"tickformat": null, "scale": "linear", "fontsize": 10.0, "grid": 
{"gridOn": false}, "visible": true}, {"position": "left", "nticks": 
7, "tickvalues": null, "tickformat": null, "scale": "linear", 
"fontsize": 10.0, "grid": {"gridOn": false}, "visible": true}], 
"axesbg": "#FFFFFF", "axesbgalpha": null, "zoomable": true, "id": 
"el5964139626790567160", "lines": [], "paths": [{"data": "data01", 
"xindex": 0, "yindex": 1, "coordinates": "data", "pathcodes": ["M", 
"L", "L", "L", "Z"], "id": "el5964139626787673648", "dasharray": 
"none", "alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data02", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787673144", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data03", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787675104", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data04", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787675888", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data05", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787675944", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data06", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787726672", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data07", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787727456", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data08", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787728240", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data09", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787729024", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data04", "xindex": 2, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787729304", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data10", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787775712", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data09", "xindex": 2, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787776496", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data11", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787777280", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data12", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787778064", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data13", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787778344", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data14", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787837040", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}], "markers": [], "texts": [{"text": 
"Side Effects", "position": [0.5, -0.06337181337181337], 
"coordinates": "axes", "h_anchor": "middle", "v_baseline": 
"hanging", "rotation": -0.0, "fontsize": 10.0, "color": "#000000", 
"alpha": 1, "zorder": 3, "id": "el5964139626790622600"}, {"text": 
"Percentages of Occurence of Side Effects", "position": 
[-0.06065028161802356, 0.5], "coordinates": "axes", "h_anchor": 
"middle", "v_baseline": "auto", "rotation": -90.0, "fontsize": 
10.0, "color": "#000000", "alpha": 1, "zorder": 3, "id": 
"el5964139626790623608"}, {"text": "Bar Chart showing Side Effects 
of Breast Cancer Medication(s) With Their Corrresponding 
Percentages Of Occurence", "position": [0.5, 1.018037518037518], 
"coordinates": "axes", "h_anchor": "middle", "v_baseline": "auto", 
"rotation": -0.0, "fontsize": 12.0, "color": "#000000", "alpha": 1, 
"zorder": 3, "id": "el5964139626790701712"}], "collections": [], 
"images": [], "sharex": [], "sharey": []}], "data": {"data01": 
[[-0.25, 0.0], [0.25, 0.0], [0.25, 24.0], [-0.25, 24.0]], "data02": 
[[0.75, 0.0], [1.25, 0.0], [1.25, 8.0], [0.75, 8.0]], "data03": 
[[1.75, 0.0], [2.25, 0.0], [2.25, 40.0], [1.75, 40.0]], "data04": 
[[2.75, 0.0, 8.75], [3.25, 0.0, 9.25], [3.25, 19.0, 9.25], [2.75, 
19.0, 8.75]], "data05": [[3.75, 0.0], [4.25, 0.0], [4.25, 10.0], 
[3.75, 10.0]], "data06": [[4.75, 0.0], [5.25, 0.0], [5.25, 50.0], 
[4.75, 50.0]], "data07": [[5.75, 0.0], [6.25, 0.0], [6.25, 14.0], 
[5.75, 14.0]], "data08": [[6.75, 0.0], [7.25, 0.0], [7.25, 1.0], 
[6.75, 1.0]], "data09": [[7.75, 0.0, 10.75], [8.25, 0.0, 11.25], 
[8.25, 0.0, 11.25], [7.75, 0.0, 10.75]], "data10": [[9.75, 0.0], 
[10.25, 0.0], [10.25, 28.0], [9.75, 28.0]], "data11": [[11.75, 
0.0], [12.25, 0.0], [12.25, 31.0], [11.75, 31.0]], "data12": 
[[12.75, 0.0], [13.25, 0.0], [13.25, 32.0], [12.75, 32.0]], 
"data13": [[13.75, 0.0], [14.25, 0.0], [14.25, 0.3], [13.75, 0.3]], 
"data14": [[14.75, 0.0], [15.25, 0.0], [15.25, 1.8], [14.75, 
1.8]]}, "id": "el5964139626790566096", "plugins": [{"type": 
"reset"}, {"type": "zoom", "button": true, "enabled": false}, 
{"type": "boxzoom", "button": true, "enabled": false}]}); }(mpld3); 
}else if(typeof define === "function" && define.amd){ // require.js 
is available: use it to load d3/mpld3 require.config({paths: {d3: 
"https://mpld3.github.io/js/d3.v3.min"}}); require(["d3"], 
function(d3){ window.d3 = d3; 
mpld3_load_lib("https://mpld3.github.io/js/mpld3.v0.3.js", 
function(){ 
mpld3.draw_figure("fig_el59641396267905660961816143295", {"width": 
700.0, "height": 600.0, "axes": [{"bbox": [0.125, 
0.10999999999999999, 0.775, 0.77], "xlim": [-1.025, 16.025], 
"ylim": [0.0, 52.5], "xdomain": [-1.025, 16.025], "ydomain": [0.0, 
52.5], "xscale": "linear", "yscale": "linear", "axes": 
[{"position": "bottom", "nticks": 16, "tickvalues": null, 
"tickformat": null, "scale": "linear", "fontsize": 10.0, "grid": 
{"gridOn": false}, "visible": true}, {"position": "left", "nticks": 
7, "tickvalues": null, "tickformat": null, "scale": "linear", 
"fontsize": 10.0, "grid": {"gridOn": false}, "visible": true}], 
"axesbg": "#FFFFFF", "axesbgalpha": null, "zoomable": true, "id": 
"el5964139626790567160", "lines": [], "paths": [{"data": "data01", 
"xindex": 0, "yindex": 1, "coordinates": "data", "pathcodes": ["M", 
"L", "L", "L", "Z"], "id": "el5964139626787673648", "dasharray": 
"none", "alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data02", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787673144", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data03", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787675104", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data04", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787675888", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data05", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787675944", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data06", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787726672", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data07", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787727456", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data08", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787728240", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data09", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787729024", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data04", "xindex": 2, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787729304", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data10", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787775712", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data09", "xindex": 2, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787776496", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data11", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787777280", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data12", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787778064", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data13", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787778344", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data14", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787837040", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}], "markers": [], "texts": [{"text": 
"Side Effects", "position": [0.5, -0.06337181337181337], 
"coordinates": "axes", "h_anchor": "middle", "v_baseline": 
"hanging", "rotation": -0.0, "fontsize": 10.0, "color": "#000000", 
"alpha": 1, "zorder": 3, "id": "el5964139626790622600"}, {"text": 
"Percentages of Occurence of Side Effects", "position": 
[-0.06065028161802356, 0.5], "coordinates": "axes", "h_anchor": 
"middle", "v_baseline": "auto", "rotation": -90.0, "fontsize": 
10.0, "color": "#000000", "alpha": 1, "zorder": 3, "id": 
"el5964139626790623608"}, {"text": "Bar Chart showing Side Effects 
of Breast Cancer Medication(s) With Their Corrresponding 
Percentages Of Occurence", "position": [0.5, 1.018037518037518], 
"coordinates": "axes", "h_anchor": "middle", "v_baseline": "auto", 
"rotation": -0.0, "fontsize": 12.0, "color": "#000000", "alpha": 1, 
"zorder": 3, "id": "el5964139626790701712"}], "collections": [], 
"images": [], "sharex": [], "sharey": []}], "data": {"data01": 
[[-0.25, 0.0], [0.25, 0.0], [0.25, 24.0], [-0.25, 24.0]], "data02": 
[[0.75, 0.0], [1.25, 0.0], [1.25, 8.0], [0.75, 8.0]], "data03": 
[[1.75, 0.0], [2.25, 0.0], [2.25, 40.0], [1.75, 40.0]], "data04": 
[[2.75, 0.0, 8.75], [3.25, 0.0, 9.25], [3.25, 19.0, 9.25], [2.75, 
19.0, 8.75]], "data05": [[3.75, 0.0], [4.25, 0.0], [4.25, 10.0], 
[3.75, 10.0]], "data06": [[4.75, 0.0], [5.25, 0.0], [5.25, 50.0], 
[4.75, 50.0]], "data07": [[5.75, 0.0], [6.25, 0.0], [6.25, 14.0], 
[5.75, 14.0]], "data08": [[6.75, 0.0], [7.25, 0.0], [7.25, 1.0], 
[6.75, 1.0]], "data09": [[7.75, 0.0, 10.75], [8.25, 0.0, 11.25], 
[8.25, 0.0, 11.25], [7.75, 0.0, 10.75]], "data10": [[9.75, 0.0], 
[10.25, 0.0], [10.25, 28.0], [9.75, 28.0]], "data11": [[11.75, 
0.0], [12.25, 0.0], [12.25, 31.0], [11.75, 31.0]], "data12": 
[[12.75, 0.0], [13.25, 0.0], [13.25, 32.0], [12.75, 32.0]], 
"data13": [[13.75, 0.0], [14.25, 0.0], [14.25, 0.3], [13.75, 0.3]], 
"data14": [[14.75, 0.0], [15.25, 0.0], [15.25, 1.8], [14.75, 
1.8]]}, "id": "el5964139626790566096", "plugins": [{"type": 
"reset"}, {"type": "zoom", "button": true, "enabled": false}, 
{"type": "boxzoom", "button": true, "enabled": false}]}); }); }); 
}else{ // require.js not available: dynamically load d3 & mpld3 
mpld3_load_lib("https://mpld3.github.io/js/d3.v3.min.js", 
function(){ 
mpld3_load_lib("https://mpld3.github.io/js/mpld3.v0.3.js", 
function(){ 
mpld3.draw_figure("fig_el59641396267905660961816143295", {"width": 
700.0, "height": 600.0, "axes": [{"bbox": [0.125, 
0.10999999999999999, 0.775, 0.77], "xlim": [-1.025, 16.025], 
"ylim": [0.0, 52.5], "xdomain": [-1.025, 16.025], "ydomain": [0.0, 
52.5], "xscale": "linear", "yscale": "linear", "axes": 
[{"position": "bottom", "nticks": 16, "tickvalues": null, 
"tickformat": null, "scale": "linear", "fontsize": 10.0, "grid": 
{"gridOn": false}, "visible": true}, {"position": "left", "nticks": 
7, "tickvalues": null, "tickformat": null, "scale": "linear", 
"fontsize": 10.0, "grid": {"gridOn": false}, "visible": true}], 
"axesbg": "#FFFFFF", "axesbgalpha": null, "zoomable": true, "id": 
"el5964139626790567160", "lines": [], "paths": [{"data": "data01", 
"xindex": 0, "yindex": 1, "coordinates": "data", "pathcodes": ["M", 
"L", "L", "L", "Z"], "id": "el5964139626787673648", "dasharray": 
"none", "alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data02", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787673144", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data03", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787675104", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data04", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787675888", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data05", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787675944", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data06", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787726672", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data07", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787727456", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data08", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787728240", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data09", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787729024", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data04", "xindex": 2, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787729304", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data10", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787775712", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data09", "xindex": 2, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787776496", "dasharray": "none", 
"alpha": 1, "facecolor": "#1F77B4", "edgecolor": "none", 
"edgewidth": 1.0, "zorder": 1}, {"data": "data11", "xindex": 0, 
"yindex": 1, "coordinates": "data", "pathcodes": ["M", "L", "L", 
"L", "Z"], "id": "el5964139626787777280", "dasharray": "none", 
...........
1.8]]}, "id": "el5964139626790566096", "plugins": [{"type": 
"reset"}, {"type": "zoom", "button": true, "enabled": false}, 
{"type": "boxzoom", "button": true, "enabled": false}]}); }) }); } 
</script>

谢谢您的帮助。

1 个解决方案

解决方案1
 1 已采纳  2019-08-05 21:02:51

出于安全原因，模板会转换一些在HTML中具有特殊含义的字符。

如果要放置HTML（而不是将其显示为文本），则必须通知模板这是安全的HTML。 

{{ bar_chart|safe }}

Doc： 控制自动转义

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 mpld3在ipython笔记本中没有显示数字 MPLD3与Python错误 在pyspark中使用matplotlib或mpld3制作条形图时出现问题 为什么mpld3示例不起作用？ 使用django以HTML格式显示mpld3图表 mpld3交互式图例在IE中不起作用 如何在mpld3上使用Interactive Legend插件显示标签？ mpld3不能正确显示x轴上的日期 取消隐藏MPLD3中的工具栏 mpld3的pip安装
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM