在 Heroku 上托管的 Flask 应用程序中渲染散景图
Render Bokeh plots in Flask app hosted on Heroku
我有以下由 Heroku 在 https://macabre-spirit-1593.herokuapp.com/1/ 提供的基本散景图。当我在本地 运行 这个应用程序,或者保存 Heroku 页面并在本地打开它时,该图出现,但是当我在 Heroku 上查看该页面时,该图不存在。为什么从 Heroku 服务时没有出现情节?
<html>
<head>
<link rel="stylesheet" href="http://cdn.bokeh.org/bokeh/release/bokeh-0.9.2.min.css" type="text/css" />
<script type="text/javascript" src="http://cdn.bokeh.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>
Heroku 页面通过 HTTPS 提供。页面上的资源被硬编码为通过 HTTP 提供服务。出于安全原因,现代浏览器会检测并阻止它;您可以解除警告并观察情节出现。更改链接的资源,以便它们也通过 HTTPS 提供服务,或者更好的是省略方案并让浏览器决定。
<link rel="stylesheet" href="//cdn.bokeh.org/bokeh/release/bokeh-0.9.2.min.css" type="text/css" />
<script type="text/javascript" src="//cdn.bokeh.org/bokeh/release/bokeh-0.9.2.min.js"></script>
http://docs.bokeh.org/en/latest/docs/user_guide/embed.html 上提供的 Bokeh 文档说明如下:
When embedding in a page served via HTTPS, any scripts and resources
must also be loaded via HTTPS or the browser will refuse to load due
to an “unsafe” script. For this situation, the Bokeh CDN resources are
also available via HTTPS, by replacing “http” with “https” in the
above URLs.
由于 Heroku 应用程序是通过 HTTPS 提供的,因此 Bokeh 样式表和脚本链接应以 https
开头,而不是 http
。
<link href="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.6.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.6.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.6.min.js"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.6.min.js"></script>
我有以下由 Heroku 在 https://macabre-spirit-1593.herokuapp.com/1/ 提供的基本散景图。当我在本地 运行 这个应用程序,或者保存 Heroku 页面并在本地打开它时,该图出现,但是当我在 Heroku 上查看该页面时,该图不存在。为什么从 Heroku 服务时没有出现情节?
<html>
<head>
<link rel="stylesheet" href="http://cdn.bokeh.org/bokeh/release/bokeh-0.9.2.min.css" type="text/css" />
<script type="text/javascript" src="http://cdn.bokeh.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>
Heroku 页面通过 HTTPS 提供。页面上的资源被硬编码为通过 HTTP 提供服务。出于安全原因,现代浏览器会检测并阻止它;您可以解除警告并观察情节出现。更改链接的资源,以便它们也通过 HTTPS 提供服务,或者更好的是省略方案并让浏览器决定。
<link rel="stylesheet" href="//cdn.bokeh.org/bokeh/release/bokeh-0.9.2.min.css" type="text/css" />
<script type="text/javascript" src="//cdn.bokeh.org/bokeh/release/bokeh-0.9.2.min.js"></script>
http://docs.bokeh.org/en/latest/docs/user_guide/embed.html 上提供的 Bokeh 文档说明如下:
When embedding in a page served via HTTPS, any scripts and resources must also be loaded via HTTPS or the browser will refuse to load due to an “unsafe” script. For this situation, the Bokeh CDN resources are also available via HTTPS, by replacing “http” with “https” in the above URLs.
由于 Heroku 应用程序是通过 HTTPS 提供的,因此 Bokeh 样式表和脚本链接应以 https
开头,而不是 http
。
<link href="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.6.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.6.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.6.min.js"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.6.min.js"></script>