如何自定义BokehJS中右侧Y轴的刻度间距

问题根源在于右侧Y轴的范围设置和刻度列表不匹配：你设置的y2_range起始值是0.001，但FixedTicker里包含了更小的0.0001，这个刻度超出了轴范围，被挤压在底部，导致刻度间距混乱。按照以下步骤修改即可解决：

1. 对齐右侧Y轴范围与刻度最小值 #

把y2_range的起始值调整为和刻度列表里的最小值一致：

const y2_range = new Bokeh.Range1d({start: 0.0001, end: 10});

2. 移除LogAxis中多余的x_range参数 #

创建右侧轴时不需要指定x_range，这个参数属于冗余配置，直接删除：

const second_y_axis = new Bokeh.LogAxis({
    y_range_name:"y2_range",
    axis_label:'Vibration Profile (g^2/Hz)',
    bounds:[0.0001, 10]
});

3. 可选：优化刻度标签间距 #

如果还是觉得标签挤，可以调大major_label_standoff的值，让标签离轴更远：

const plot = Bokeh.Plotting.figure({
    // ... 其他配置不变
    major_label_standoff: 5
});

修改后的完整代码 #

function zip(arr1, arr2, floatCast){
    var out = {};
    if (floatCast){
        arr1.map( (val,idx)=>{ out[parseFloat(val)] = arr2[idx]; } );
        }
    else{
        arr1.map( (val,idx)=>{ out[val] = arr2[idx]; } );
        }
    return out;
}

function createBokehPlot(PNVibe, staticPN, transX, transY){
    //empty the previous plot
    $( "#graph-div" ).empty();

    //Data Source for PN under vibration vs. offset frequency 
    const source = new Bokeh.ColumnDataSource({
    data: { x: Object.keys(PNVibe), y: Object.values(PNVibe) }
    });
                
    //Data source for Static PN vs offset frequency
    const source1 = new Bokeh.ColumnDataSource({
        data: { x: Object.keys(staticPN), y: Object.values(staticPN) }
    });

    //Data source for Transmissibility line
    const source2 = new Bokeh.ColumnDataSource({
        data: { x: transX, y: transY}
    });

    //Set plot x/y ranges
    var max_offset = Math.max(Object.keys(PNVibe));
    const xdr = new Bokeh.Range1d({ start: 1, end: 100000 });
    const ydr = new Bokeh.Range1d({ start: -180, end: -50 });
    // 修正右侧Y轴范围
    const y2_range = new Bokeh.Range1d({start: 0.0001, end: 10});

    // make a plot with some tools
    const plot = Bokeh.Plotting.figure({
        title: 'Example of random data',
        tools: "pan,wheel_zoom,box_zoom,reset,save",
        toolbar_location: "right",
        toolbar_sticky: false,
        height: 600,
        width: 700,
        outerWidth: 800,
        legend_location: "top_left",
        x_range: xdr,
        y_range: ydr,
        x_axis_type:"log",
        x_axis_label: "Offset Frequency (Hz)",
        y_axis_type: "linear",
        y_axis_label: "Phase Noise (dBc/Hz)",
        extra_y_ranges: {y2_range},
        // 调大标签与轴的间距
        major_label_standoff: 5
});

    //Add the second y axis on the right - 移除冗余的x_range参数
    const second_y_axis = new Bokeh.LogAxis({
        y_range_name:"y2_range",
        axis_label:'Vibration Profile (g^2/Hz)',
        bounds:[0.0001, 10]
    });
    second_y_axis.ticker = new Bokeh.FixedTicker({ticks: [0.0001, 0.001, 0.01, 0.1, 1, 10]})
    plot.add_layout(second_y_axis, "right");


    // add line for vibraiton phase noise
    plot.line({ field: "x" }, { field: "y" }, {
        source: source,
        line_width: 2,
        line_color: "red",
        legend_label: "Phase Noise under Vibrations"
        });
                
    //add line for static phase noise
    plot.line({ field: "x" }, { field: "y" }, {
        source: source1,
        line_width: 2,
        line_color: "blue",
        legend_label: "Static Phase Noise"
        });

    plot.line({ field: "x" }, { field: "y" }, {
        source: source2,
        line_width: 2,
        line_color: "green",
        y_range_name:"y2_range",
        legend_label: "Transmissibillity"
        });

    // show the plot, appending it to the end of the current section
    Bokeh.Plotting.show(plot, "#graph-div");
    return;
}

//Call function
var PNVibe = zip([10, 100, 1000], [-95, -100, -105], false);
var staticPN = zip([10, 100, 1000], [-90, -105, -110], false);
var transX = [10, 100, 1000];
var transY = [0.0005, 0.003, 0.05];
createBokehPlot(PNVibe, staticPN, transX, transY);

修改后，右侧对数Y轴的所有刻度都会落在轴的有效范围内，每个刻度间的间距会保持一致，底部刻度不会再拥挤重叠。

内容的提问来源于stack exchange，提问作者mrblue6