Question

由于BokehJS相对较新，我很难找到一个显示CustomJS与BokehJS一起使用的工作示例。我希望事情与在python中使用CustomJS有所不同，因为在python中使用CustomJS时，应该可以在BokehJS中直接提供javascript函数作为CustomJS的参数而不是javascript代码段。

在没有任何进一步信息的情况下，我最好的猜测是下面的代码，它意味着只要在平移或缩放用户操作时更新，就会在控制台中打印x轴的下限，而不是工作

任何人都可以更正并在BokehJS中显示CustomJS的正确用法吗？

编辑：使用Github上提供的解决方案更新示例。谢谢！

<html>
<head>
    <link rel="stylesheet" href="https://cdn.pydata.org/bokeh/release/bokeh-0.12.10.css" type="text/css" />
    <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-0.12.10.js"></script>
    <script type="text/javascript" src="https://cdn.pydata.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>

Answer 1

Issue was discussed here: https://github.com/bokeh/bokeh/issues/7130

Current proper usage shown in edited code from the question.

Starting from Bokeh 0.12.11, it will also be possible to define callback on range directly as javascript functions:

plot.x_range.callback=function(){console.log(plot.x_range.start);};

如何在BokehJS中使用CustomJS？

1 个答案: