时间戳

首页 > 解决方案 > Bokeh, Django - 通过组件嵌入更多独立的图

python - Bokeh, Django - 通过组件嵌入更多独立的图

问题描述

我有带有用于嵌入的散景图组件对的数据库 - 脚本和 Div HTML 元素。我想在单页上嵌入更多独立的散景图。下面的模板代码为每次迭代呈现相同的第一个图，请告知我做错了什么..

PS：我知道要嵌入多个图，您可以为所有图导出单个脚本，并为每个图导出唯一的 Div。这对我不起作用，因为每个情节将在不同的时间生成（更新）。

谢谢你的帮助！

{% for plot in plots %}
  <div>
    {{ plot.plot_div | safe }}
    {{ plot.plot_script | safe }}
  </div>
{% endfor %}

标签： pythondjangobokeh

解决方案

在这种情况下，您可能应该使用最近添加json_item的嵌入。此函数会生成它所传递的任何内容的 JSON 表示，可以使用 JavaScript 调用单独嵌入到Bokeh.embed.embed_items您的模板中。

这是一个基于 Flask 的完整示例，但这个想法应该直接转移到 Django：

from __future__ import print_function
import json

from bokeh.embed import json_item
from bokeh.plotting import figure
from bokeh.resources import CDN
from bokeh.sampledata.iris import flowers

from flask import Flask
from jinja2 import Template

app = Flask(__name__)

page = Template("""
<!DOCTYPE html>
<html lang="en">
<head>
  {{ resources }}
</head>
<body>
  <div id="myplot"></div>
  <div id="myplot2"></div>
  <script>
  fetch('/plot')
    .then(function(response) { return response.json(); })
    .then(function(item) { Bokeh.embed.embed_item(item); })
  </script>
  <script>
  fetch('/plot2')
    .then(function(response) { return response.json(); })
    .then(function(item) { Bokeh.embed.embed_item(item, "myplot2"); })
  </script>
</body>
""")

colormap = {'setosa': 'red', 'versicolor': 'green', 'virginica': 'blue'}
colors = [colormap[x] for x in flowers['species']]

def make_plot(x, y):
    p = figure(title = "Iris Morphology", sizing_mode="fixed", plot_width=400, plot_height=400)
    p.xaxis.axis_label = x
    p.yaxis.axis_label = y
    p.circle(flowers[x], flowers[y], color=colors, fill_alpha=0.2, size=10)
    return p

@app.route('/')
def root():
    return page.render(resources=CDN.render())

@app.route('/plot')
def plot():
    p = make_plot('petal_width', 'petal_length')
    return json.dumps(json_item(p, "myplot"))

@app.route('/plot2')
def plot2():
    p = make_plot('sepal_width', 'sepal_length')
    return json.dumps(json_item(p))

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

推荐阅读