Question

我想使用Json输出将Bokeh图嵌入Django模板中。 http://bokeh.pydata.org/en/latest/docs/user_guide/embed.html#json-items

Json输出已准备好在数据库中查询。情节应呈现给具有特定ID的div。

文档说使用带有以下代码功能的模板中的Json输出：

const value = '1 552 222';
const searchText = '22';
const excludes = ' @!#'; // the characters to exclude (including spaces)

console.log(getIndex(value, searchText));

function getIndex(str, search) {
  return search ? str.split("").findIndex((c, i) =>
    c === search[0] &&
    clean(str.slice(i), excludes).startsWith(search)
  ) : 0;
}

function clean(str, toRemove) {
  return str.split("")
    .filter(c => !toRemove.includes(c))
    .join("");
}

请告知在模板中使用的正确语法：

item = JSON.parse(item_text);
Bokeh.embed.embed_item(item);

查看文件：

<div id="title"></div>

<script>
function(response) { return item = JSON.parse( {{plot_json}} ); }
function(item) { Bokeh.embed.embed_item(item); }
</script>

Answer 1

我对Bokeh不太了解，但是我知道您需要确保在Django模板中以JavaScript正确读取JSON对象并且不会自动转义。尝试autoescape off以及Bokeh'then'语法。

<div id="title"></div>

<script>        
fetch('/plot') 
    .then(function(response) { 
         {% autoescape off %}
             return item = JSON.parse( {{plot_json}} ); 
        {% autoescape on %}
    })
    .then(function(item) { Bokeh.embed.embed_item(item); })
</script>

Answer 2

也许这个简化的jinja2示例可以为您提供帮助（已在Bokeh v1.0.4上进行了测试）。运行方式为：

python myapp.py

文件和目录结构：

myapp
   |
   +---myapp.py
   +---templates
        +---index.html

myapp.py

import io
import json
import jinja2
import numpy as np
from bokeh.plotting import figure, curdoc
from bokeh.embed import json_item
from bokeh.resources import CDN

plot = figure()
plot.line(np.arange(10), np.random.random(10))
curdoc().add_root(plot)

renderer = jinja2.Environment(loader = jinja2.FileSystemLoader(['templates']), trim_blocks = True)
html = renderer.get_template('index.html').render(resources = CDN.render(), item_json_object = json.dumps(json_item(plot)))

filename = 'json_items.html'
with io.open(filename, mode = 'w', encoding = 'utf-8') as f:
    f.write(html)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
{{ resources }}
</head>
<body>
<div id="myplot"></div>
<script>
    Bokeh.embed.embed_item({{ item_json_object }}, "myplot");
</script>
</body>
</html>

似乎json.dumps(json_item(plot)）传递给模板的结果已经是一个JSON对象，因此您不能在其上使用JSON.parse()。或确保您确实将字符串对象传递给此函数。

您所指的Bokeh documentation指向an example，这不同于在浏览器中页面加载时使用JS fetch（）方法动态加载地块数据的意义上的这一点，而这里的地块数据在模板渲染时附加到页面上。

Django，将JavaScript插入模板的语法

2 个答案: