使用 Django 模型嵌入散景[重复]

Posted

技术标签:

【中文标题】使用 Django 模型嵌入散景[重复]【英文标题】：Embed Bokeh with Django model [duplicate] 【发布时间】：2019-02-02 06:42:26 【问题描述】：

我在一个开发环境中有 python 程序来流式传输数据并将 Bokeh div 和脚本组件保存到数据库上的文件中。不同环境中的网络服务器在请求网页时为数据库中的 div 和脚本组件提供服务。查看 html 页面源代码（如下所示）似乎可以正确显示整个 Bokeh 包，没有视觉错误，但没有图表。请指教。

作为旁注，我尝试了how to embed standalone bokeh graphs into django templates，（在每个页面请求时在views.py 中呈现图表），但这在我的网络框架中也失败了：

models.py：

from django.db import models


class Item(models.Model):
    name = models.CharField(max_length=32)
    description = models.TextField()
    image = models.ImageField(blank=True, null=True)
    script_com = models.FileField(blank=True, null=True)
    div_com = models.FileField(blank=True, null=True)

    def __str__(self):
        return self.name

    def get_image(self):
        return self.image

    def display_script_com(self):
        with open(self.script_com.path) as f:
            return f.read()

    def display_div_com(self):
        with open(self.div_com.path) as f:
            return f.read()

views.py：

from django.shortcuts import render
from sentiment_analysis.models import Item


def index(request):
    return render(request,'sentiment_analysis/index.html', 
        'itemContext':Item.objects.get(id=1)
    )

def get_update(request):
    return render(request,'sentiment_analysis/index.html', 
        'itemContext':Item.objects.get(id=1)
    )

index.html:

% extends 'sentiment_analysis/layout.html' %
% block content %
<style>
    .imgbox 
     display: grid;
     height: 100%;
    
    .center-fit 
     max-width: 100%;
     max-height: 100vh;
     display: block;
     margin-left: auto;
     margin-right: auto;
    
</style>
<div >
    <div >
        <link href="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.13.min.css" rel="stylesheet" type="text/css">
        <link href="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.13.min.css" rel="stylesheet" type="text/css">
        <link href="https://cdn.bokeh.org/bokeh/release/bokeh-tables-0.12.13.min.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.13.min.js"></script>
        <script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.13.min.js"></script>
        <script src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-0.12.13.min.js"></script>

         itemContext.display_script_com | safe 
         itemContext.display_div_com | safe 
    </div>
    <div class="imgbox">
        <form method="GET">
            % csrf_token %
            <img class="center-fit" src=" itemContext.image.url "/>
            <br>
            <button class="center-fit" type="submit">Update</button>
        </form>
    </div>
</div>
% endblock %

网页来源：

<style>

    .imgbox 
     display: grid;
     height: 100%;
    
    .center-fit 
     max-width: 100%;
     max-height: 100vh;
     display: block;
     margin-left: auto;
     margin-right: auto;
    
    </style>

<div >
    <div >
        <link href="http://cdn.bokeh.org/bokeh/release/bokeh-0.13.0.min.css" rel="stylesheet" type="text/css">
        <script src="http://cdn.bokeh.org/bokeh/release/bokeh-0.13.0.min.js"></script>

<div class="bk-root" id="6da85ec8-092d-4c5e-b9c7-1538d41b81c3"></div>

<script type="text/javascript">
  (function() 
    var fn = function() 
      Bokeh.safely(function() 
        (function(root) 
          function embed_document(root) 

          var docs_json = '"14425cbe-28a8-4871-a77c-33e2fca75f34":"roots":"references":["attributes":"num_minor_ticks":5,"tickers":["id":"d1139925-c510-47f9-8392-0ec23fe9247d","type":"AdaptiveTicker","id":"b5c24cb3-96cf-4ea7-9b8c-49f1b4e0c9eb","type":"AdaptiveTicker","id":"0581aaf3-856b-452a-9b84-d15c368ba8e5","type":"AdaptiveTicker","id":"bf181bd2-afd7-41f8-be3a-865cca89fedd","type":"DaysTicker","id":"f5e971a5-def0-49e1-9875-b00ea35ea798","type":"DaysTicker","id":"8cd2a919-ace7-4f27-b0c4-27c7f0ec893e","type":"DaysTicker","id":"33db587a-ce1d-4599-9369-dae8a5422e8d","type":"DaysTicker","id":"e3229ee7-1025-4834-92d5-5e6676d42a0e","type":"MonthsTicker","id":"a4061de2-0776-47c9-a361-155db590004f","type":"MonthsTicker","id":"0e364e1a-0ab7-4360-8101-9eab0655d8ef","type":"MonthsTicker","id":"3bb4982d-d2f4-4044-aa84-0d5178c09bd7","type":"MonthsTicker","id":"5aa460e3-0757-47d9-a726-e36714fc2dfd","type":"YearsTicker"],"id":"24f8e500-d2ec-48ed-a907-aae68786cc74","type":"DatetimeTicker","attributes":"base":24,"mantissas":[1,2,4,6,8,12],"max_interval":43200000.0,"min_interval":3600000.0,"num_minor_ticks":0,"id":"0581aaf3-856b-452a-9b84-d15c368ba8e5","type":"AdaptiveTicker","attributes":"plot":null,"text":"Tesla Sentiment","id":"60f08c84-3e82-474c-9a51-f6caace198ee","type":"Title","attributes":"days":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],"id":"bf181bd2-afd7-41f8-be3a-865cca89fedd","type":"DaysTicker","attributes":"days":[1,4,7,10,13,16,19,22,25,28],"id":"f5e971a5-def0-49e1-9875-b00ea35ea798","type":"DaysTicker","attributes":"data_source":"id":"4f193c61-9048-4bc5-9676-3fa377a78447","type":"ColumnDataSource","glyph":"id":"d8c69f3e-6a5b-4a08-ad99-2a722cf5af8a","type":"Line","hover_glyph":null,"muted_glyph":null,"nonselection_glyph":"id":"932d1e42-906a-4610-b438-628508cc1444","type":"Line","selection_glyph":null,"view":"id":"c7b79ec5-570a-4ce6-91ba-b147c862a2f4","type":"CDSView","id":"41e9f145-71ae-4fde-8687-57b321acc152","type":"GlyphRenderer","attributes":"days":[1,8,15,22],"id":"8cd2a919-ace7-4f27-b0c4-27c7f0ec893e","type":"DaysTicker","attributes":,"id":"e58b906b-6b19-4c9f-b6f2-7b924db2b052","type":"LinearScale","attributes":"days":[1,15],"id":"33db587a-ce1d-4599-9369-dae8a5422e8d","type":"DaysTicker","attributes":"months":[0,1,2,3,4,5,6,7,8,9,10,11],"id":"e3229ee7-1025-4834-92d5-5e6676d42a0e","type":"MonthsTicker","attributes":"callback":null,"id":"f6ec3037-a0ae-45c2-9db9-04e70b5fea42","type":"DataRange1d","attributes":"months":[0,2,4,6,8,10],"id":"a4061de2-0776-47c9-a361-155db590004f","type":"MonthsTicker","attributes":"formatter":"id":"592321ce-036c-4268-96cf-cc0eeb9b8e94","type":"DatetimeTickFormatter","plot":"id":"b286cd09-f230-4bc1-96ea-14f0bad8d641","subtype":"Figure","type":"Plot","ticker":"id":"24f8e500-d2ec-48ed-a907-aae68786cc74","type":"DatetimeTicker","id":"78b4ed5d-f84f-4539-abe8-5fb216e967c9","type":"DatetimeAxis","attributes":"months":[0,4,8],"id":"0e364e1a-0ab7-4360-8101-9eab0655d8ef","type":"MonthsTicker","attributes":"months":[0,6],"id":"3bb4982d-d2f4-4044-aa84-0d5178c09bd7","type":"MonthsTicker","attributes":"grid_line_alpha":"value":0.5,"plot":"id":"b286cd09-f230-4bc1-96ea-14f0bad8d641","subtype":"Figure","type":"Plot","ticker":"id":"24f8e500-d2ec-48ed-a907-aae68786cc74","type":"DatetimeTicker","id":"92e07aef-c11b-4429-af2c-5b4d869a237e","type":"Grid","attributes":,"id":"5aa460e3-0757-47d9-a726-e36714fc2dfd","type":"YearsTicker","attributes":"formatter":"id":"cda7f473-f438-4368-8822-7187c7a623f6","type":"BasicTickFormatter","plot":"id":"b286cd09-f230-4bc1-96ea-14f0bad8d641","subtype":"Figure","type":"Plot","ticker":"id":"1a2a6a14-3e98-4b9f-abea-e5d341bcc4f9","type":"BasicTicker","id":"69f60ed4-25cc-4dc3-b981-73900ca62545","type":"LinearAxis","attributes":,"id":"da5675dd-3f98-4bcf-b06a-d9c03b6e07c0","type":"Selection","attributes":,"id":"1a2a6a14-3e98-4b9f-abea-e5d341bcc4f9","type":"BasicTicker","attributes":"below":["id":"78b4ed5d-f84f-4539-abe8-5fb216e967c9","type":"DatetimeAxis"],"left":["id":"69f60ed4-25cc-4dc3-b981-73900ca62545","type":"LinearAxis"],"renderers":["id":"78b4ed5d-f84f-4539-abe8-5fb216e967c9","type":"DatetimeAxis","id":"92e07aef-c11b-4429-af2c-5b4d869a237e","type":"Grid","id":"69f60ed4-25cc-4dc3-b981-73900ca62545","type":"LinearAxis","id":"d15e0336-d3d4-4539-baa4-93ece82de190","type":"Grid","id":"6f6e76f9-dbb4-41bd-9388-093d272d3322","type":"BoxAnnotation","id":"41e9f145-71ae-4fde-8687-57b321acc152","type":"GlyphRenderer"],"title":"id":"60f08c84-3e82-474c-9a51-f6caace198ee","type":"Title","toolbar":"id":"d965ea4f-c4f1-481d-8e8e-afa04f78e87d","type":"Toolbar","x_range":"id":"c3671359-429d-4c48-a39c-d3c6c2432696","type":"DataRange1d","x_scale":"id":"979e8806-ddf2-4279-b387-2be8ba9d2fe3","type":"LinearScale","y_range":"id":"f6ec3037-a0ae-45c2-9db9-04e70b5fea42","type":"DataRange1d","y_scale":"id":"e58b906b-6b19-4c9f-b6f2-7b924db2b052","type":"LinearScale","id":"b286cd09-f230-4bc1-96ea-14f0bad8d641","subtype":"Figure","type":"Plot","attributes":,"id":"72877d0c-6eec-43a6-9f1b-b6415e6a27ef","type":"UnionRenderers","attributes":"dimension":1,"grid_line_alpha":"value":0.5,"plot":"id":"b286cd09-f230-4bc1-96ea-14f0bad8d641","subtype":"Figure","type":"Plot","ticker":"id":"1a2a6a14-3e98-4b9f-abea-e5d341bcc4f9","type":"BasicTicker","id":"d15e0336-d3d4-4539-baa4-93ece82de190","type":"Grid","attributes":,"id":"1e2192bb-2083-4791-9792-fff4e518705a","type":"PanTool","attributes":"callback":null,"id":"c3671359-429d-4c48-a39c-d3c6c2432696","type":"DataRange1d","attributes":"bottom_units":"screen","fill_alpha":"value":0.5,"fill_color":"value":"lightgrey","left_units":"screen","level":"overlay","line_alpha":"value":1.0,"line_color":"value":"black","line_dash":[4,4],"line_width":"value":2,"plot":null,"render_mode":"css","right_units":"screen","top_units":"screen","id":"6f6e76f9-dbb4-41bd-9388-093d272d3322","type":"BoxAnnotation","attributes":"line_color":"#1f77b4","x":"field":"Date","y":"field":"Total_Sentiment","id":"d8c69f3e-6a5b-4a08-ad99-2a722cf5af8a","type":"Line","attributes":,"id":"922717fe-cc98-4968-9c20-f53a58346487","type":"WheelZoomTool","attributes":"overlay":"id":"6f6e76f9-dbb4-41bd-9388-093d272d3322","type":"BoxAnnotation","id":"d6a4d04c-d444-4461-928b-23ca87255a1b","type":"BoxZoomTool","attributes":,"id":"282f47fa-8eec-4966-a6e9-19889be9c972","type":"ResetTool","attributes":,"id":"b8246d69-e232-412f-982f-32470ad85984","type":"SaveTool","attributes":"line_alpha":0.1,"line_color":"#1f77b4","x":"field":"Date","y":"field":"Total_Sentiment","id":"932d1e42-906a-4610-b438-628508cc1444","type":"Line","attributes":"source":"id":"4f193c61-9048-4bc5-9676-3fa377a78447","type":"ColumnDataSource","id":"c7b79ec5-570a-4ce6-91ba-b147c862a2f4","type":"CDSView","attributes":,"id":"979e8806-ddf2-4279-b387-2be8ba9d2fe3","type":"LinearScale","attributes":"callback":null,"data":"Date":"__ndarray__":"AIBDz4ZXdkIAAP/Phld2QgCAN9GGV3ZCAABw0oZXdkIAAO3Shld2QgCAGdaGV3ZCAABS14ZXdkIAAFLXhld2QgAAUteGV3ZCAABG2YZXdkIAADrbhld2QgAAOtuGV3ZCAAC324ZXdkI=","dtype":"float64","shape":[13],"Sentiment":"__ndarray__":"AAAAAAAAAAAAAAAAAADgP5qZmZmZmbk/AAAAAAAAoD8AAAAAAACgPwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABMqOLwgItI/AAAAAAAAAAA=","dtype":"float64","shape":[13],"Total_Sentiment":"__ndarray__":"AAAAAAAAAAAAAAAAAADwPwAAAAAAAABAAAAAAAAACEAAAAAAAAAQQAAAAAAAABBAAAAAAAAAEEAAAAAAAAAQQAAAAAAAABBAAAAAAAAAEEAAAAAAAAAQQAAAAAAAABRAAAAAAAAAFEA=","dtype":"float64","shape":[13],"Tweet_Id":[1,2,3,4,5,6,7,8,9,10,11,12,13],"index":[0,1,2,3,4,5,6,7,8,9,10,11,12],"selected":"id":"da5675dd-3f98-4bcf-b06a-d9c03b6e07c0","type":"Selection","selection_policy":"id":"72877d0c-6eec-43a6-9f1b-b6415e6a27ef","type":"UnionRenderers","id":"4f193c61-9048-4bc5-9676-3fa377a78447","type":"ColumnDataSource","attributes":,"id":"cda7f473-f438-4368-8822-7187c7a623f6","type":"BasicTickFormatter","attributes":,"id":"592321ce-036c-4268-96cf-cc0eeb9b8e94","type":"DatetimeTickFormatter","attributes":"callback":null,"formatters":"Date":"datetime","mode":"vline","renderers":"auto","tooltips":[["Space-Time","@Date%F"],["Tweet Sentiment","@Sentiment"],["Cummulative Sentiment","@Total_Sentiment"]],"id":"90aa17a6-9714-482b-bcdf-c8f08855e56b","type":"HoverTool","attributes":"mantissas":[1,2,5],"max_interval":500.0,"num_minor_ticks":0,"id":"d1139925-c510-47f9-8392-0ec23fe9247d","type":"AdaptiveTicker","attributes":"active_drag":"auto","active_inspect":"auto","active_multi":null,"active_scroll":"auto","active_tap":"auto","tools":["id":"1e2192bb-2083-4791-9792-fff4e518705a","type":"PanTool","id":"922717fe-cc98-4968-9c20-f53a58346487","type":"WheelZoomTool","id":"d6a4d04c-d444-4461-928b-23ca87255a1b","type":"BoxZoomTool","id":"282f47fa-8eec-4966-a6e9-19889be9c972","type":"ResetTool","id":"b8246d69-e232-412f-982f-32470ad85984","type":"SaveTool","id":"90aa17a6-9714-482b-bcdf-c8f08855e56b","type":"HoverTool"],"id":"d965ea4f-c4f1-481d-8e8e-afa04f78e87d","type":"Toolbar","attributes":"base":60,"mantissas":[1,2,5,10,15,20,30],"max_interval":1800000.0,"min_interval":1000.0,"num_minor_ticks":0,"id":"b5c24cb3-96cf-4ea7-9b8c-49f1b4e0c9eb","type":"AdaptiveTicker"],"root_ids":["b286cd09-f230-4bc1-96ea-14f0bad8d641"],"title":"Bokeh Application","version":"0.13.0"';
      var render_items = ["docid":"14425cbe-28a8-4871-a77c-33e2fca75f34","roots":"b286cd09-f230-4bc1-96ea-14f0bad8d641":"6da85ec8-092d-4c5e-b9c7-1538d41b81c3"];
      root.Bokeh.embed.embed_items(docs_json, render_items);

      
      if (root.Bokeh !== undefined) 
        embed_document(root);
       else 
        var attempts = 0;
        var timer = setInterval(function(root) 
          if (root.Bokeh !== undefined) 
            embed_document(root);
            clearInterval(timer);
          
          attempts++;
          if (attempts > 100) 
            console.log("Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing")
            clearInterval(timer);
          
        , 10, root)
      
    )(window);
  );
;
if (document.readyState != "loading") fn();
else document.addEventListener("DOMContentLoaded", fn);
  )();
</script>

</div>

<div class="imgbox">
    <form method="GET">
        <input type="hidden" name="csrfmiddlewaretoken" value="p7jvRxqYrbUe5ArEYxFb6oD0nvuUBDJNKETaaXkFkjtdrym5lxNua30rb4qHWhoR">
        <img class="center-fit" src="/media/graph.png"/>
        <br>
        <button class="center-fit" type="submit">Update</button>
    </form>
</div>

状态更新： 错误：

【问题讨论】：

您是否在浏览器开发工具窗口中查看 javascript 错误？还是只在日志文件中查找 python 错误？ （顺便说一句，如果您真的想获得帮助，请创建一个minimal reproducible example） 已更新错误图片 【参考方案1】：

您在 index.html 中嵌入了错误版本的 BokehJS。您从 CDN 加载的 BokehJS 版本必须与您使用的 Python Bokeh 库的版本匹配。你正在加载0.12.13:

<link href="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.13.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.13.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.bokeh.org/bokeh/release/bokeh-tables-0.12.13.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.13.min.js"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.13.min.js"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-0.12.13.min.js"></script>

尤其是Selection 模型在0.12.13 中不存在

【讨论】：

该解决方案解决了我的问题。我使用的是 0.13.0 版本，所以我只是替换了版本号。

以上是关于使用 Django 模型嵌入散景[重复]的主要内容，如果未能解决你的问题，请参考以下文章

嵌入式散景数据表未在 Django 中显示

在 django 中使用交互式控件制作散景图

悬停工具在散景中不起作用[重复]

Django使用字符串过滤模型以避免重复

Django-使用 ManyToManyField 查询嵌套模型中的重复查询

Django模型基于两个变量防止重复[重复]