Javascript Bokeh：如何处理Div中文本的陈词滥调？

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

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

---

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

---

---

如何从那里调用回调python/bokeh函数？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>

//在这里，您可以在上绑定一个事件
document.querySelector（'a[href=“something”]”）
.addEventListener（“单击”，函数（e）{
e、 预防默认值（）；
//在这里创建一个请求
var xhr=new XMLHttpRequest（）；
xhr.open（'GET'，”http://my-url-which-display-my-graph.dev");
xhr.addEventListener（'readystatechange'，function（）{
//当请求的状态更改时调用此回调
如果（xhr.readyState==4&&xhr.status==200）{
//如果请求完成并成功，则输入此条件
document.getElementById（'mygraph'）。innerHTML=xhr.responseText；
}
});
});
xhr.send（）；

此代码尚未测试，只是作为示例提供

对于bokeh，您似乎有一个客户端库：

（我不知道博克，但我会尽力回答）：

//在这里，您可以在上绑定一个事件
document.querySelector（'a[href=“something”]”）
.addEventListener（“单击”，函数（e）{
e、 预防默认值（）；
//我的bokeh代码，来自他们的文档：
var x=Bokeh.LinAlg.linspace（-0.5,20.5,10）；
var y=x.map（函数（v）{返回v*0.5+3.0；}）；
var source=new Bokeh.ColumnDataSource（{data:{x:x，y:y}}）；
//为绘图创建一些范围
var xdr=new Bokeh.Range1d（{start:-0.5，end:20.5}）；
var ydr=波基范围1d（-0.5,20.5）；
//策划
变量图=新的Bokeh.图({
标题：“BokehJS阴谋”，
x_范围：xdr，
y_范围：ydr，
绘图宽度：400，
地块高度：400，
背景颜色：“F2F7”
});
var xaxis=new Bokeh.LinearAxis（{axis\u line\u color:null}）；
var yaxis=new Bokeh.LinearAxis（{axis\u line\u color:null}）；
绘图。添加_布局（xaxis，“下方”）；
绘图。添加_布局（yaxis，“左”）；
var线=新Bokeh线({
x:{字段：“x”}，
y:{字段：“y”}，
线条颜色：“666699”，
线宽：2
});
绘图。添加图形符号（线、源）；
//将打印添加到文档并显示它
var doc=新的Bokeh.Document（）；
文件添加_根（绘图）；
document.getElementById（“mygraph”）.innerHTML=“”；
Bokeh.embed.add_document_standalone（doc，document.getElementById（“mygraph”）；

此代码尚未测试，只是作为示例提供

有很多方法可以做到这一点，你可以先画图表，然后用JS+CSS隐藏/显示。这取决于你想要实现什么。 如果不想使用客户端库，可以将用户重定向到绘制图表的其他页面

如果您是javascript新手，我建议您使用jQuery这样的库来轻松地完成任务

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