散景圖的補充 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__()

為了將其嵌入到網頁中，我還需要什么其他東西？ 我更喜歡鏈接到外部托管的 javascript 而不是內聯所有內容。

我的理想答案是“只需復制粘貼這三行：...”

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']