在用户与我的独立HTML文档上的图形进行交互之前,我一直无法正确显示图形上的字体。
以下是用于生成脚本和div并将其放置在HTML文件中的python代码(请注意,我使用Roboto作为我的字体):
df1 = pd.DataFrame({"A":[1,2,3,4,5,6],
"B":[5,6,3,2,1,4]})
graph = ColumnDataSource(data= df1)
p = figure(plot_width=600, plot_height=400)
p.line(source = graph, x = 'A', y = 'B')
p.xaxis.axis_label = "Number"
p.xaxis.axis_label_text_font = 'Roboto'
p.xaxis.axis_label_text_font_size = '14pt'
p.xaxis.major_label_text_font_size = '10pt'
p.yaxis.axis_label = "Average"
p.yaxis.axis_label_text_font = 'Roboto'
p.yaxis.axis_label_text_font_size = '14pt'
p.yaxis.major_label_text_font_size = '10pt'
script, div = components(p)
以下是插入脚本div和必要的其他脚本以及指向标头(即cdn.bokeh.org和fonts.googleapis)的链接之后的html:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bokeh Line Plot</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700" />
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-1.4.0.min.js"></script>
<script type="text/javascript">
(function() {
var fn = function() {
Bokeh.safely(function() {
(function(root) {
function embed_document(root) {
var docs_json = '{"acd6be22-a352-429f-bbb6-e0e40d198ca6":{"roots":{"references":[{"attributes":{"callback":null},"id":"5824","type":"DataRange1d"},{"attributes":{"source":{"id":"5822","type":"ColumnDataSource"}},"id":"5859","type":"CDSView"},{"attributes":{},"id":"5847","type":"HelpTool"},{"attributes":{"dimension":1,"ticker":{"id":"5838","type":"BasicTicker"}},"id":"5841","type":"Grid"},{"attributes":{"below":[{"id":"5832","type":"LinearAxis"}],"center":[{"id":"5836","type":"Grid"},{"id":"5841","type":"Grid"}],"left":[{"id":"5837","type":"LinearAxis"}],"plot_height":400,"renderers":[{"id":"5858","type":"GlyphRenderer"}],"title":{"id":"5861","type":"Title"},"toolbar":{"id":"5848","type":"Toolbar"},"x_range":{"id":"5824","type":"DataRange1d"},"x_scale":{"id":"5828","type":"LinearScale"},"y_range":{"id":"5826","type":"DataRange1d"},"y_scale":{"id":"5830","type":"LinearScale"}},"id":"5823","subtype":"Figure","type":"Plot"},{"attributes":{"line_alpha":0.1,"line_color":"#1f77b4","x":{"field":"A"},"y":{"field":"B"}},"id":"5857","type":"Line"},{"attributes":{},"id":"5846","type":"ResetTool"},{"attributes":{},"id":"5833","type":"BasicTicker"},{"attributes":{"line_color":"#1f77b4","x":{"field":"A"},"y":{"field":"B"}},"id":"5856","type":"Line"},{"attributes":{"callback":null,"data":{"A":[1,2,3,4,5,6],"B":[5,6,3,2,1,4],"index":[0,1,2,3,4,5]},"selected":{"id":"5867","type":"Selection"},"selection_policy":{"id":"5868","type":"UnionRenderers"}},"id":"5822","type":"ColumnDataSource"},{"attributes":{"axis_label":"Average","axis_label_text_font":"Roboto","axis_label_text_font_size":{"value":"14pt"},"formatter":{"id":"5862","type":"BasicTickFormatter"},"major_label_text_font_size":{"value":"10pt"},"ticker":{"id":"5838","type":"BasicTicker"}},"id":"5837","type":"LinearAxis"},{"attributes":{"data_source":{"id":"5822","type":"ColumnDataSource"},"glyph":{"id":"5856","type":"Line"},"hover_glyph":null,"muted_glyph":null,"nonselection_glyph":{"id":"5857","type":"Line"},"selection_glyph":null,"view":{"id":"5859","type":"CDSView"}},"id":"5858","type":"GlyphRenderer"},{"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},"render_mode":"css","right_units":"screen","top_units":"screen"},"id":"5866","type":"BoxAnnotation"},{"attributes":{},"id":"5843","type":"WheelZoomTool"},{"attributes":{"overlay":{"id":"5866","type":"BoxAnnotation"}},"id":"5844","type":"BoxZoomTool"},{"attributes":{},"id":"5842","type":"PanTool"},{"attributes":{},"id":"5867","type":"Selection"},{"attributes":{},"id":"5862","type":"BasicTickFormatter"},{"attributes":{"callback":null},"id":"5826","type":"DataRange1d"},{"attributes":{},"id":"5864","type":"BasicTickFormatter"},{"attributes":{"text":""},"id":"5861","type":"Title"},{"attributes":{"ticker":{"id":"5833","type":"BasicTicker"}},"id":"5836","type":"Grid"},{"attributes":{"axis_label":"Number","axis_label_text_font":"Roboto","axis_label_text_font_size":{"value":"14pt"},"formatter":{"id":"5864","type":"BasicTickFormatter"},"major_label_text_font_size":{"value":"10pt"},"ticker":{"id":"5833","type":"BasicTicker"}},"id":"5832","type":"LinearAxis"},{"attributes":{},"id":"5828","type":"LinearScale"},{"attributes":{},"id":"5838","type":"BasicTicker"},{"attributes":{},"id":"5830","type":"LinearScale"},{"attributes":{},"id":"5868","type":"UnionRenderers"},{"attributes":{},"id":"5845","type":"SaveTool"},{"attributes":{"active_drag":"auto","active_inspect":"auto","active_multi":null,"active_scroll":"auto","active_tap":"auto","tools":[{"id":"5842","type":"PanTool"},{"id":"5843","type":"WheelZoomTool"},{"id":"5844","type":"BoxZoomTool"},{"id":"5845","type":"SaveTool"},{"id":"5846","type":"ResetTool"},{"id":"5847","type":"HelpTool"}]},"id":"5848","type":"Toolbar"}],"root_ids":["5823"]},"title":"Bokeh Application","version":"1.4.0"}}';
var render_items = [{"docid":"acd6be22-a352-429f-bbb6-e0e40d198ca6","roots":{"5823":"03d9974b-b67c-4395-9dec-d23214a6cb55"}}];
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) {
clearInterval(timer);
embed_document(root);
} else {
attempts++;
if (attempts > 100) {
clearInterval(timer);
console.log("Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing");
}
}
}, 10, root)
}
})(window);
});
};
if (document.readyState != "loading") fn();
else document.addEventListener("DOMContentLoaded", fn);
})();
</script>
</head>
<body>
<div class="bk-root" id="03d9974b-b67c-4395-9dec-d23214a6cb55" data-root-id="5823"></div>
</body>
</html>
注意主轴标签的字体,然后向任意方向拖动图形,您会注意到主轴的字体更改为Roboto。
我也尝试过使用autoload_static()
方法来生成脚本,然后以这种方式将字形插入HTML中,但最终得到的结果完全相同。 chrome控制台中也没有错误。
感谢您的帮助!
答案 0 :(得分:0)
我曾希望使用更新的json_item
API会更好,但是那也不起作用。从Bokeh 1.4开始,恐怕我没有任何好的答案或解决方法。在这一点上,我将其描述为需要调查的错误,因此,我鼓励您使用submit a GitHub issue about it(包括要复制的完整代码)。