如何在 BokehJS 中使用 CustomJS?
How to use CustomJS in BokehJS?
由于 BokehJS 相对较新,我正在努力寻找一个工作示例来展示 CustomJS 与 BokehJS 的用法。我希望事情与在 python 中使用 CustomJS 有所不同,因为应该可以在 BokehJS 中直接提供 javascript 函数作为 CustomJS 的参数,而不是在使用 CustomJS 在 python.
在没有任何进一步信息的情况下,我最好的猜测是以下代码,它旨在在平移或缩放用户操作时更新时在控制台中打印 x 轴的下限,并且它不起作用。
任何人都可以更正此问题并展示 BokehJS 中 CustomJS 的正确用法吗?
编辑:使用 Github 上提供的解决方案更新示例。谢谢!
<html>
<head>
<link rel="stylesheet" href="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.10.css" type="text/css" />
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.10.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-0.12.10.js"></script>
<!-- The order of CSS and JS imports above is important. -->
</head>
<body>
<div id="myPlot">
</div>
<script type="text/javascript">
// data to plot
var source = new Bokeh.ColumnDataSource({
data: { x: [0,1,2,3,4,5,6,7,8,9], y: [0,1,4,-2,2,5,0,2,1,1] }
});
// make the plot and add some tools
var tools = "pan,crosshair,wheel_zoom,box_zoom,reset,save";
var plot = Bokeh.Plotting.figure({
title:"demo plot",
tools: tools,
toolbar_location:"above",
sizing_mode:"stretch_both"
});
var scatterData = plot.line({ field: "x" }, { field: "y" }, {
source: source,
line_width: 2
});
plot.x_range.callback=new Bokeh.CustomJS({args:{plot:plot},code:"console.log(plot.x_range.start);"});
// Show the plot, appending it to the end of the current
// section of the document we are in.
Bokeh.Plotting.show(plot,document.getElementById("myPlot"));
</script>
</body>
</html>
这里讨论了问题:
https://github.com/bokeh/bokeh/issues/7130
问题的编辑代码中显示的当前正确用法。
从 Bokeh 0.12.11 开始,也可以直接将范围回调定义为 javascript 函数:
plot.x_range.callback=function(){console.log(plot.x_range.start);};
由于 BokehJS 相对较新,我正在努力寻找一个工作示例来展示 CustomJS 与 BokehJS 的用法。我希望事情与在 python 中使用 CustomJS 有所不同,因为应该可以在 BokehJS 中直接提供 javascript 函数作为 CustomJS 的参数,而不是在使用 CustomJS 在 python.
在没有任何进一步信息的情况下,我最好的猜测是以下代码,它旨在在平移或缩放用户操作时更新时在控制台中打印 x 轴的下限,并且它不起作用。
任何人都可以更正此问题并展示 BokehJS 中 CustomJS 的正确用法吗?
编辑:使用 Github 上提供的解决方案更新示例。谢谢!
<html>
<head>
<link rel="stylesheet" href="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.10.css" type="text/css" />
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.10.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-0.12.10.js"></script>
<!-- The order of CSS and JS imports above is important. -->
</head>
<body>
<div id="myPlot">
</div>
<script type="text/javascript">
// data to plot
var source = new Bokeh.ColumnDataSource({
data: { x: [0,1,2,3,4,5,6,7,8,9], y: [0,1,4,-2,2,5,0,2,1,1] }
});
// make the plot and add some tools
var tools = "pan,crosshair,wheel_zoom,box_zoom,reset,save";
var plot = Bokeh.Plotting.figure({
title:"demo plot",
tools: tools,
toolbar_location:"above",
sizing_mode:"stretch_both"
});
var scatterData = plot.line({ field: "x" }, { field: "y" }, {
source: source,
line_width: 2
});
plot.x_range.callback=new Bokeh.CustomJS({args:{plot:plot},code:"console.log(plot.x_range.start);"});
// Show the plot, appending it to the end of the current
// section of the document we are in.
Bokeh.Plotting.show(plot,document.getElementById("myPlot"));
</script>
</body>
</html>
这里讨论了问题: https://github.com/bokeh/bokeh/issues/7130
问题的编辑代码中显示的当前正确用法。
从 Bokeh 0.12.11 开始,也可以直接将范围回调定义为 javascript 函数:
plot.x_range.callback=function(){console.log(plot.x_range.start);};