散景图的补充 JavaScript

Question

假设我有一个非常简单的散景图：

from bokeh.plotting import figure
p = figure(title="simple line example", x_axis_label='x', y_axis_label='y')
p.line([1, 2, 3], [1, 4, 9])

这个数字很好地产生了HTML

html = p.__repr_html__()

为了将其嵌入网页，我还需要哪些其他东西？我更喜欢 link 到外部托管 javascript 而不是内联所有内容。

我理想的答案是 "Just copy-paste these three lines:..."

Answer 1

要在您的网页中嵌入散景图而无需内联 JS/CSS，您可以将 bokeh.embed.components 与 bokeh.resources.CDN 一起使用，如下例所示

http://docs.bokeh.org/en/latest/docs/user_guide/embedding.html#components

from bokeh.plotting import figure
from bokeh.resources import CDN
from bokeh.embed import components

plot = figure()
plot.circle([1,2], [3,4])

script, div = components(plot, CDN)

考虑到使用这些组件假设 BokehJS 已经加载，例如在文档文本中内联，或从 CDN 加载。

您必须在 html 页面中添加以呈现图表的 CDN 标签是，例如对于散景版本 0.8.2：

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

确保这些链接对应于您实际传递给组件的版本。您可以通过以下方式获取这些链接：

In [1]: from bokeh.resources import CDN

In [2]: CDN.js_files
Out[2]: ['http://cdn.bokeh.org/bokeh/release/bokeh-0.8.2.min.js']

In [3]: CDN.css_files
Out[3]: ['http://cdn.bokeh.org/bokeh/release/bokeh-0.8.2.min.css']

散景图的补充 JavaScript

Supplemental JavaScript for Bokeh Plot

python

bokeh