Question

我有一个散景服务器应用程序。我有一个文本Div元素和一些单词。

如果我点击其中一个，我想触发一个动作（画一个图表），让我们说。我可以添加一个超链接，以便Div的内容

<小时/>

<a href="something">abc</a>
<a href="somethingElse">defgh</a>

如何从那里调用回调python / bokeh函数？

Answer 1

Python是一种服务器端语言。你不能直接在JS中编写服务器端语言（动态的东西，如没有页面重新加载的响应是用javascript完成的），你可以做的是调用服务器要求它绘制你的图表，然后添加返回的html服务器到你的DOM。（还有其他方法可以执行此操作，您可以转到另一个绘制图形的页面，但问题已标记为“javascript”）。例如：

<a href="something">abc</a> <a href="somethingElse">defgh</a>
<div id="mygraph"></div>
<script>
// Here you bind an event on <a href="something">abc</a>
document.querySelector('a[href="something"]')
   .addEventListener("click", function(e) {
       e.preventDefault();
       // Here you create a request
       var xhr = new XMLHttpRequest();
       xhr.open('GET', "http://my-url-which-display-my-graph.dev");
       xhr.addEventListener('readystatechange', function() {
       // This callback is called when the request's state change
           if (xhr.readyState === 4 && xhr.status === 200) {
           // You enter in this condition if the request is done and successfull

               document.getElementById('mygraph').innerHTML = xhr.responseText;
           }
    });
});
xhr.send();
</script>

此代码尚未经过测试，已作为示例提供。

对于散景，似乎你有一个客户端库：https://bokeh.pydata.org/en/latest/docs/user_guide/bokehjs.html（我不知道散景，但我会尝试回答）：

<a href="something">abc</a> <a href="somethingElse">defgh</a>
<div id="mygraph"></div>
<script>
// Here you bind an event on <a href="something">abc</a>
document.querySelector('a[href="something"]')
   .addEventListener("click", function(e) {
       e.preventDefault();
       // My bokeh code, from their doc:
       var x = Bokeh.LinAlg.linspace(-0.5, 20.5, 10);
       var y = x.map(function (v) { return v * 0.5 + 3.0; });
       var source = new Bokeh.ColumnDataSource({ data: { x: x, y: y } });

       // create some ranges for the plot
       var xdr = new Bokeh.Range1d({ start: -0.5, end: 20.5 });
       var ydr = Bokeh.Range1d(-0.5, 20.5);

       // make the plot
       var plot = new Bokeh.Plot({
          title: "BokehJS Plot",
          x_range: xdr,
          y_range: ydr,
          plot_width: 400,
          plot_height: 400,
          background_fill_color: "#F2F2F7"
       });
       var xaxis = new Bokeh.LinearAxis({ axis_line_color: null });
       var yaxis = new Bokeh.LinearAxis({ axis_line_color: null });
       plot.add_layout(xaxis, "below");
       plot.add_layout(yaxis, "left");

       var line = new Bokeh.Line({
           x: { field: "x" },
           y: { field: "y" },
           line_color: "#666699",
           line_width: 2
        });
       plot.add_glyph(line, source);

       // add the plot to a document and display it
       var doc = new Bokeh.Document();
       doc.add_root(plot);
       document.getElementById("mygraph").innerHTML = "";
       Bokeh.embed.add_document_standalone(doc, document.getElementById("mygraph"));
</script>

此代码尚未经过测试，已作为示例提供。

有很多方法可以做到这一点，你可以先绘制图表然后隐藏它/使用JS + CSS显示它。这取决于你想要达到的目标。如果您不想使用客户端库，则可以将用户重定向到绘制图表的另一个页面。

如果您不熟悉javascript，我建议您使用像jQuery这样的库来轻松实现。

散景：如何处理Div中的文字？

1 个答案: