Question

我在一个开发环境中使用python程序来流数据并将Bokeh div和脚本组件保存到数据库中的文件中。当请求网页时，位于不同环境中的Web服务器从数据库提供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.pydata.org/bokeh/release/bokeh-0.12.13.min.css" rel="stylesheet" type="text/css">
        <link href="https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.13.min.css" rel="stylesheet" type="text/css">
        <link href="https://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.13.min.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.pydata.org/bokeh/release/bokeh-0.12.13.min.js"></script>
        <script src="https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.13.min.js"></script>
        <script src="https://cdn.pydata.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.pydata.org/bokeh/dev/bokeh-0.13.0.min.css" rel="stylesheet" type="text/css">
        <script src="http://cdn.pydata.org/bokeh/dev/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>

状态更新：错误：

Answer 1

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

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

尤其是Selection中不存在0.12.13模型

使用Django模型嵌入Bokeh

1 个答案: