为什么 mpld3 条形图与 python 文件中的一个 "version" 一起显示，而不与另一个一起显示？
Why does mpld3 bar chart show with one "version" of a python file, and not with the other?
我有一个 python 文件的两个版本（如果这是描述它的好方法），用于在网页上打印条形图（使用 mpld3）。一个版本有效，而另一个版本（将按我的需要打印条形图）无效。具体来说，每个python"version"中的索引函数returns是不一样的。为什么一个 "returned value" 导致条形图打印而另一个不打印？
（简要说明我的程序应该做什么：SQLite3 table 中的数据被提取到 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 文件，应该在后面代码的索引函数中返回：
<!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>
感谢您的帮助。
出于安全原因，模板转换了一些在 HTML 中具有特殊含义的字符。
如果您想放置 HTML（而不是将其显示为文本），那么您必须通知模板这是安全的 HTML。
{{ bar_chart|safe }}
我有一个 python 文件的两个版本（如果这是描述它的好方法），用于在网页上打印条形图（使用 mpld3）。一个版本有效，而另一个版本（将按我的需要打印条形图）无效。具体来说，每个python"version"中的索引函数returns是不一样的。为什么一个 "returned value" 导致条形图打印而另一个不打印？
（简要说明我的程序应该做什么：SQLite3 table 中的数据被提取到 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 文件，应该在后面代码的索引函数中返回：
<!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>
感谢您的帮助。
出于安全原因，模板转换了一些在 HTML 中具有特殊含义的字符。
如果您想放置 HTML（而不是将其显示为文本），那么您必须通知模板这是安全的 HTML。
{{ bar_chart|safe }}