Plotly JavaScript图表：设置网格线但隐藏部分刻度值

要实现保留网格线但不显示全部刻度值的需求，只需在轴配置中分离网格线间隔与刻度显示的控制逻辑即可——核心用dtick维持网格线密度，通过tickmode、tickvals或ticktext控制刻度的显示。

方案1：只显示指定刻度值，保留网格线 #

如果仅需展示关键刻度（比如x轴只显示整数刻度，同时保留0.1间隔的网格线），可修改代码如下：

var data = [];
var layout = {
    xaxis: {
        range: [0, 5],
        dtick: 0.1, // 网格线每0.1显示一条
        gridcolor: 'rgb(152,152,152)',
        tickmode: 'array',
        tickvals: [0, 1, 2, 3, 4, 5], // 仅显示这些刻度值
        ticks: 'outside' // 若需隐藏刻度线，替换为ticklen: 0即可
    }, 
    yaxis: {
        range: [0, 25], 
        dtick: 1, // 网格线每1显示一条
        gridcolor: 'rgb(152,152,152)',
        tickmode: 'array',
        tickvals: [0, 5, 10, 15, 20, 25] // 仅显示指定的y轴刻度
    },
};
Plotly.newPlot('myDiv', data, layout);

方案2：隐藏所有刻度标签，仅保留网格线 #

如果需要完全隐藏刻度标签和刻度线，只保留网格线，可通过设置透明字体和零长度刻度线实现：

var data = [];
var layout = {
    xaxis: {
        range: [0, 5],
        dtick: 0.1,
        gridcolor: 'rgb(152,152,152)',
        tickfont: { color: 'rgba(0,0,0,0)' }, // 隐藏刻度标签
        ticklen: 0 // 隐藏刻度线
    }, 
    yaxis: {
        range: [0, 25], 
        dtick: 1,
        gridcolor: 'rgb(152,152,152)',
        tickfont: { color: 'rgba(0,0,0,0)' },
        ticklen: 0
    },
};
Plotly.newPlot('myDiv', data, layout);

关键配置说明 #

• dtick：严格控制网格线的间隔，不受刻度显示设置影响
• tickmode: 'array'：手动指定要显示的刻度值集合
• tickvals：定义需要显示的具体刻度数值
• tickfont.color：通过透明色隐藏刻度标签
• ticklen: 0：移除刻度线（若不需要可省略）

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