无法在Django模板中嵌入JSON散景图 [英] Unable to embed JSON Bokeh Plot in Django template
问题描述
我有一个脚本，该脚本接收上载的数据，将其合并在一起，将其转换为绘图(使用Bokeh)，然后将其作为JSON导出到目录中.
I have a script which takes uploaded data, munges it together, turns it into a plot (using Bokeh) and then exports it to a directory as JSON.
将来，用户可以点击正确的URL，相应的图应作为HTML模板的一部分显示给用户.
At some point in the future, a user can hit the right URL and the appropriate plot should be displayed to the user as part of the HTML template.
我可以生成情节.我可以将其另存为JSON.我可以获取将该URL检索为JSON的URL，但无法在模板中呈现该JSON图.
I can generate the plot. I can save it as JSON. I can get the URL to retrieve it as JSON, but I cannot get the JSON plot to render within the template.
我已经了解了Bokeh文档和示例，但是它们似乎都使用了flask应用程序来提供页面.
I've had a dig around the Bokeh documentation and examples, but they all seem to use a flask app to serve the pages.
我认为我走在正确的轨道上，使用views.py查找并返回JSON作为render()响应的一部分，然后让Bokeh.embed.embed_items()在模板中进行工作以使其看起来正确，但是效果不佳-会显示除情节以外的所有内容.
I think I'm on the right track, using views.py to find and return JSON as part of a render() response, and then have Bokeh.embed.embed_items() do the work in the template to make it look right, but it's not working out - everything but the plot is displayed.
1)创建图并将其放置在目录中以供以后使用(app/results/1)
创建plot.py
import os
import json
from django.conf import settings
from bokeh.embed import json_item
from bokeh.plotting import figure
x=[1,2,3,4,5]
y=[0,-1,-2,3,4]
p=figure(title="test_example")
p.line(x, y)
#json_export = json_item(p, "result")
json_export = json_item(p)
with open(os.path.join(settings.RESULTS_DIR,"1", "test.json"), 'w') as fp:
fp.write(json.dumps(json_export))
2)设置网址
urls.py
urlpatterns=[
path('result/<int:pk>', views.resultdetailview, name='result-detail'),
]
3)接受请求，使用pk查找剧情json并将其全部渲染到适当的模板中.
views.py
def resultdetailview(request, pk):
results=str(pk)
with open(os.path.join(settings.RESULTS_DIR, results, "test.json"), 'r') as fp:
#data=json.load(fp)
data=json.loads(fp.read())
#context={'result':data}
#return render(request, 'app/sandbox_detail.html', context)
return render(request=request,
context={'json_object':data, 'resources':CDN.render()})
注意::如果我改用return JsonResponse(data, safe=False)，则该网址会成功返回json ...
NB: If I instead use return JsonResponse(data, safe=False) then the url returns the json successfully ...
因此，我认为问题出在模板中.
I think therefore that the issue is in the template.
4)向用户显示奇妙的情节
sandbox_detail.html
<header>
<link rel="stylesheet" href="http://cdn.bokeh.org./bokeh/release/bokeh-0.11.1.min.css" type="text/css" >
<script type="text/javascript" src="http://cdn.bokeh.org./bokeh/release/bokeh-0.11.1.min.js"> </script>
</header>
<h1> Title: Test </h1>
<div>Test</div>
<body>
<div id="result"></div>
<script>
Bokeh.embed.embed_item({{json_object}}, "result");
</script>
</body>
此模板可呈现除结果" div之外的所有内容.
This template renders everything but the 'result' div.
我错过了什么?
推荐答案
这是我到目前为止看到的:
This is what I see so far:
第一::您正在混合使用两种方法将绘图json数据注入到页面中. 根据文档，您可以使用以下两种方法之一进行操作:
FIRST: You are mixing 2 methods for injecting plot json data into the page. According to documentation you can do it using either of these two methods:
1)直接指定div:
Python: json_data = json.dumps(json_item(p, "myplot"))
JavaScript: Bokeh.embed.embed_item(item);
2)在embed_item函数中指定div:
Python: json_data = json.dumps(json_item(p))
JavaScript: Bokeh.embed.embed_item(item, "myplot");
但不是两个都同时出现.这可能是问题吗?
But not both of them at the same time. Could this be the problem?
秒:最好不要手动插入Bokeh资源:而是使用CDN.render()或INLINE.render()自动包含脚本所需的全部内容:
SECOND: Preferably don't insert Bokeh resources by hand: rather use CDN.render() or INLINE.render() to automatically include all that your script needs:
import json
from bokeh.resources import CDN
return render(request = request,
template_name = 'app/sandbox_detail.html',
context = { json_object = json.loads(json_string),
resources = CDN.render() } )
sandbox_detail.html
sandbox_detail.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
{{ resources }}
</head>
<body>
<div id="result"></div>
<script>
Bokeh.embed.embed_item({{ json_object }}, "result");
</script>
</body>
</html>
第三手:请确保您在页面中嵌入的内容是json对象而不是字符串(请参见上面的变量命名)
THIRD: Make sure what you embed in the page is json object not a string (see variable naming above)
这篇关于无法在Django模板中嵌入JSON散景图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
