在Heroku上托管的Flask应用中渲染散景图

时间:2015-10-31 13:11:39

标签: python heroku flask bokeh

我在https://macabre-spirit-1593.herokuapp.com/1/处有Heroku提供的以下基本散景图。当我在本地运行此应用程序,或保存Heroku页面并在本地打开它时,将显示该图,但当我在Heroku上查看该页面时,该图表不存在。为什么从Heroku提供的情节不会出现?

<html>
  <head>
    <link rel="stylesheet" href="http://cdn.pydata.org/bokeh/release/bokeh-0.9.2.min.css" type="text/css" />
    <script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-0.9.2.min.js"></script>
    <script type="text/javascript">
    Bokeh.$(function() {
    var all_models = [{"id": "cf51209d-4dca-4a94-befe-ce3130209c78", "attributes": {"names": [], "tags": [], "renderers": [], "doc": null, "id": "cf51209d-4dca-4a94-befe-ce3130209c78", "callback": null}, "type": "DataRange1d"}, {"id": "9b2f5c69-f94b-46ea-bd71-7c5a39f83663", "attributes": {"tags": [], "x": {"field": "x"}, "doc": null, "fill_alpha": {"value": 0.1}, "line_alpha": {"value": 0.1}, "y": {"field": "y"}, "line_color": {"value": "#1f77b4"}, "id": "9b2f5c69-f94b-46ea-bd71-7c5a39f83663", "fill_color": {"value": "#1f77b4"}, "size": {"value": 10, "units": "screen"}}, "type": "Circle"}, {"id": "1d823a82-3c1c-4d66-b72b-23e04fd18201", "attributes": {"names": [], "tags": [], "renderers": [], "doc": null, "id": "1d823a82-3c1c-4d66-b72b-23e04fd18201", "callback": null}, "type": "DataRange1d"}, {"id": "560a370b-8b4a-4727-bf2e-86f01b41218a", "attributes": {"data_source": {"id": "8ee8c50b-f9b1-46cf-a1a5-5b0d3bac8180", "type": "ColumnDataSource"}, "selection_glyph": null, "doc": null, "tags": [], "id": "560a370b-8b4a-4727-bf2e-86f01b41218a", "nonselection_glyph": {"id": "9b2f5c69-f94b-46ea-bd71-7c5a39f83663", "type": "Circle"}, "glyph": {"id": "b73f3e41-5552-4ad4-98e0-5989ee44e3e9", "type": "Circle"}}, "type": "GlyphRenderer"}, {"id": "fc1bf45f-7f16-4de5-b36f-263f20192585", "attributes": {"doc": null, "tags": [], "num_minor_ticks": 5, "id": "fc1bf45f-7f16-4de5-b36f-263f20192585", "mantissas": [2, 5, 10]}, "type": "BasicTicker"}, {"subtype": "Figure", "id": "378da220-9181-4a82-a6e8-f49f0227e53a", "attributes": {"right": [], "renderers": [{"id": "d766cfd4-5a4e-4e0a-b7e6-f81ae955566f", "type": "LinearAxis"}, {"id": "60f36638-9ebd-4472-9cc6-d520bb388413", "type": "Grid"}, {"id": "31c32470-e492-4ca3-94c5-430c5c210c6f", "type": "LinearAxis"}, {"id": "8d162596-51c4-4220-bbb9-64612ae58d52", "type": "Grid"}, {"id": "560a370b-8b4a-4727-bf2e-86f01b41218a", "type": "GlyphRenderer"}], "tools": [{"id": "280dbfef-17cd-4da0-ae45-56c01634dd87", "type": "PanTool"}, {"id": "c498d4b6-f4b4-4ed7-96d3-6a056ec29f42", "type": "WheelZoomTool"}, {"id": "e217ba06-b6fc-4a3f-97df-c21ee05e5d6e", "type": "BoxZoomTool"}, {"id": "18cc3cc0-befb-437b-9fd8-c33023baba82", "type": "PreviewSaveTool"}, {"id": "dff98135-cbce-440e-a2ce-c25bb32e88c1", "type": "ResizeTool"}, {"id": "9c973e40-a37f-4573-9d6a-7c81c864656d", "type": "ResetTool"}, {"id": "162b7eef-2558-4934-8f68-783561eea3c0", "type": "HelpTool"}], "left": [{"id": "31c32470-e492-4ca3-94c5-430c5c210c6f", "type": "LinearAxis"}], "doc": null, "above": [], "tool_events": {"id": "76240f36-4b23-431a-941b-ed95c63865a8", "type": "ToolEvents"}, "tags": [], "id": "378da220-9181-4a82-a6e8-f49f0227e53a", "extra_y_ranges": {}, "y_range": {"id": "1d823a82-3c1c-4d66-b72b-23e04fd18201", "type": "DataRange1d"}, "extra_x_ranges": {}, "x_range": {"id": "cf51209d-4dca-4a94-befe-ce3130209c78", "type": "DataRange1d"}, "below": [{"id": "d766cfd4-5a4e-4e0a-b7e6-f81ae955566f", "type": "LinearAxis"}]}, "type": "Plot"}, {"id": "b73f3e41-5552-4ad4-98e0-5989ee44e3e9", "attributes": {"tags": [], "x": {"field": "x"}, "doc": null, "fill_alpha": {"value": 1.0}, "line_alpha": {"value": 1.0}, "y": {"field": "y"}, "line_color": {"value": "#1f77b4"}, "id": "b73f3e41-5552-4ad4-98e0-5989ee44e3e9", "fill_color": {"value": "#1f77b4"}, "size": {"value": 10, "units": "screen"}}, "type": "Circle"}, {"id": "9c95ae2d-01d0-4794-856b-3a5e3ef0f4d5", "attributes": {"doc": null, "tags": [], "num_minor_ticks": 5, "id": "9c95ae2d-01d0-4794-856b-3a5e3ef0f4d5", "mantissas": [2, 5, 10]}, "type": "BasicTicker"}, {"id": "e217ba06-b6fc-4a3f-97df-c21ee05e5d6e", "attributes": {"doc": null, "tags": [], "id": "e217ba06-b6fc-4a3f-97df-c21ee05e5d6e", "dimensions": ["width", "height"], "plot": {"subtype": "Figure", "id": "378da220-9181-4a82-a6e8-f49f0227e53a", "type": "Plot"}}, "type": "BoxZoomTool"}, {"id": "dff98135-cbce-440e-a2ce-c25bb32e88c1", "attributes": {"doc": null, "tags": [], "id": "dff98135-cbce-440e-a2ce-c25bb32e88c1", "plot": {"subtype": "Figure", "id": "378da220-9181-4a82-a6e8-f49f0227e53a", "type": "Plot"}}, "type": "ResizeTool"}, {"id": "31c32470-e492-4ca3-94c5-430c5c210c6f", "attributes": {"tags": [], "ticker": {"id": "9c95ae2d-01d0-4794-856b-3a5e3ef0f4d5", "type": "BasicTicker"}, "doc": null, "plot": {"subtype": "Figure", "id": "378da220-9181-4a82-a6e8-f49f0227e53a", "type": "Plot"}, "id": "31c32470-e492-4ca3-94c5-430c5c210c6f", "formatter": {"id": "21009128-6c70-460e-9e2b-5029ea73e81e", "type": "BasicTickFormatter"}}, "type": "LinearAxis"}, {"id": "ebb30075-6525-4eb8-91a6-1ad6ef5da992", "attributes": {"id": "ebb30075-6525-4eb8-91a6-1ad6ef5da992", "doc": null, "tags": []}, "type": "BasicTickFormatter"}, {"id": "8d162596-51c4-4220-bbb9-64612ae58d52", "attributes": {"tags": [], "ticker": {"id": "9c95ae2d-01d0-4794-856b-3a5e3ef0f4d5", "type": "BasicTicker"}, "doc": null, "plot": {"subtype": "Figure", "id": "378da220-9181-4a82-a6e8-f49f0227e53a", "type": "Plot"}, "id": "8d162596-51c4-4220-bbb9-64612ae58d52", "dimension": 1}, "type": "Grid"}, {"id": "d766cfd4-5a4e-4e0a-b7e6-f81ae955566f", "attributes": {"tags": [], "ticker": {"id": "fc1bf45f-7f16-4de5-b36f-263f20192585", "type": "BasicTicker"}, "doc": null, "plot": {"subtype": "Figure", "id": "378da220-9181-4a82-a6e8-f49f0227e53a", "type": "Plot"}, "id": "d766cfd4-5a4e-4e0a-b7e6-f81ae955566f", "formatter": {"id": "ebb30075-6525-4eb8-91a6-1ad6ef5da992", "type": "BasicTickFormatter"}}, "type": "LinearAxis"}, {"id": "8ee8c50b-f9b1-46cf-a1a5-5b0d3bac8180", "attributes": {"tags": [], "doc": null, "column_names": ["x", "y"], "id": "8ee8c50b-f9b1-46cf-a1a5-5b0d3bac8180", "data": {"x": [1, 2, 3], "y": [4, 5, 6]}, "selected": {"1d": {"indices": []}, "2d": {"indices": []}, "0d": {"indices": [], "flag": false}}, "callback": null}, "type": "ColumnDataSource"}, {"id": "21009128-6c70-460e-9e2b-5029ea73e81e", "attributes": {"id": "21009128-6c70-460e-9e2b-5029ea73e81e", "doc": null, "tags": []}, "type": "BasicTickFormatter"}, {"id": "9c973e40-a37f-4573-9d6a-7c81c864656d", "attributes": {"doc": null, "tags": [], "id": "9c973e40-a37f-4573-9d6a-7c81c864656d", "plot": {"subtype": "Figure", "id": "378da220-9181-4a82-a6e8-f49f0227e53a", "type": "Plot"}}, "type": "ResetTool"}, {"id": "280dbfef-17cd-4da0-ae45-56c01634dd87", "attributes": {"doc": null, "tags": [], "id": "280dbfef-17cd-4da0-ae45-56c01634dd87", "dimensions": ["width", "height"], "plot": {"subtype": "Figure", "id": "378da220-9181-4a82-a6e8-f49f0227e53a", "type": "Plot"}}, "type": "PanTool"}, {"id": "76240f36-4b23-431a-941b-ed95c63865a8", "attributes": {"doc": null, "tags": [], "geometries": [], "id": "76240f36-4b23-431a-941b-ed95c63865a8"}, "type": "ToolEvents"}, {"id": "18cc3cc0-befb-437b-9fd8-c33023baba82", "attributes": {"doc": null, "tags": [], "id": "18cc3cc0-befb-437b-9fd8-c33023baba82", "plot": {"subtype": "Figure", "id": "378da220-9181-4a82-a6e8-f49f0227e53a", "type": "Plot"}}, "type": "PreviewSaveTool"}, {"id": "162b7eef-2558-4934-8f68-783561eea3c0", "attributes": {"doc": null, "tags": [], "id": "162b7eef-2558-4934-8f68-783561eea3c0", "plot": {"subtype": "Figure", "id": "378da220-9181-4a82-a6e8-f49f0227e53a", "type": "Plot"}}, "type": "HelpTool"}, {"id": "c498d4b6-f4b4-4ed7-96d3-6a056ec29f42", "attributes": {"doc": null, "tags": [], "id": "c498d4b6-f4b4-4ed7-96d3-6a056ec29f42", "dimensions": ["width", "height"], "plot": {"subtype": "Figure", "id": "378da220-9181-4a82-a6e8-f49f0227e53a", "type": "Plot"}}, "type": "WheelZoomTool"}, {"id": "60f36638-9ebd-4472-9cc6-d520bb388413", "attributes": {"tags": [], "ticker": {"id": "fc1bf45f-7f16-4de5-b36f-263f20192585", "type": "BasicTicker"}, "doc": null, "plot": {"subtype": "Figure", "id": "378da220-9181-4a82-a6e8-f49f0227e53a", "type": "Plot"}, "id": "60f36638-9ebd-4472-9cc6-d520bb388413", "dimension": 0}, "type": "Grid"}];
    Bokeh.load_models(all_models);
    var plots = [{'elementid': '6368f3cb-5e73-48dd-8ba6-757b1c0a1826', 'modeltype': 'Plot', 'modelid': '378da220-9181-4a82-a6e8-f49f0227e53a'}];
    for (idx in plots) {
        var plot = plots[idx];
        var model = Bokeh.Collections(plot.modeltype).get(plot.modelid);
        Bokeh.logger.info('Realizing plot:')
        Bokeh.logger.info(' - modeltype: ' + plot.modeltype);
        Bokeh.logger.info(' - modelid: ' + plot.modelid);
        Bokeh.logger.info(' - elementid: ' + plot.elementid);
        var view = new model.default_view({
            model: model,
            el: '#' + plot.elementid
        });
        Bokeh.index[plot.modelid] = view;
    }
});
</script>
  </head>
  <body>
    <div class=page>
      <h1>Plot 2</h1>
      <div class="plotdiv" id="6368f3cb-5e73-48dd-8ba6-757b1c0a1826"></div>
    </div>
  </body>
</html>

2 个答案:

答案 0 :(得分:3)

Heroku页面通过HTTPS提供。页面上的资源被硬编码为通过HTTP提供。现代浏览器出于安全原因检测并阻止它;您可以忽略警告并观察该情节出现。更改链接的资源,以便通过HTTPS提供服务,或者更好地省略方案并让浏览器决定。

<link rel="stylesheet" href="//cdn.pydata.org/bokeh/release/bokeh-0.9.2.min.css" type="text/css" />
<script type="text/javascript" src="//cdn.pydata.org/bokeh/release/bokeh-0.9.2.min.js"></script>

答案 1 :(得分:1)

http://bokeh.pydata.org/en/latest/docs/user_guide/embed.html提供的Bokeh文档声明如下:

  

嵌入通过HTTPS提供的页面时,任何脚本和资源   也必须通过HTTPS加载,否则浏览器将拒绝加载到期   到一个“不安全”的脚本。对于这种情况,Bokeh CDN资源是   也可以通过HTTPS将“http”替换为“https”   以上网址。

由于Heroku应用程序是通过HTTPS提供的,因此Bokeh样式表和脚本链接应以https而不是http开头。

<link href="https://cdn.pydata.org/bokeh/release/bokeh-0.12.6.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.6.min.css" rel="stylesheet" type="text/css">

<script src="https://cdn.pydata.org/bokeh/release/bokeh-0.12.6.min.js"></script>
<script src="https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.6.min.js"></script>