在与Glyph交互之后,Google字体才会加载到Bokeh Line Glyph上

时间:2019-11-22 00:29:23

标签: python html bokeh

在用户与我的独立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控制台中也没有错误。

感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

我曾希望使用更新的json_item API会更好,但是那也不起作用。从Bokeh 1.4开始,恐怕我没有任何好的答案或解决方法。在这一点上,我将其描述为需要调查的错误,因此,我鼓励您使用submit a GitHub issue about it(包括要复制的完整代码)。