如何在Plotly.js中隐藏热力图轴线与网格线并保留刻度

要实现隐藏所有网格线、轴线（包括原点处的0轴线）但保留底部和侧边刻度标记的需求，你需要在坐标轴配置中补充几个关键参数，具体修改后的代码如下：

var data = [
  {
    colorbar: {
      thickness: 40,
      xpad: 0,
    },
    opacity: .5,
    z: [[1, 20, 30], [20, 1, 60], [30, 60, 1]],
    type: 'heatmap'
  }
];

var layout = {
  autosize: false,
  margin: { autoexpand: false, l: 80, r: 80, t: 100, b: 80, pad: 0 },
  height: 800,
  xaxis: {
    showgrid: false, // 隐藏网格线
    showline: false, // 隐藏坐标轴边框线
    zeroline: false, // 隐藏原点处的0轴线
    showticklabels: true, // 确保刻度标签可见
    tickcolor: '#000' // 设置刻度线颜色，保证可见性
  },
  yaxis: {
    showgrid: false,
    showline: false,
    zeroline: false,
    showticklabels: true,
    tickcolor: '#000'
  },
  width: 1000,
}

Plotly.newPlot('myDiv', data, layout);

关键配置说明： #

• showgrid: false：直接关闭网格线的显示
• showline: false：隐藏坐标轴的外围边框线
• zeroline: false：移除原点位置的0值轴线（这是你示例图中残留的那条线）
• showticklabels: true：明确开启刻度标签显示（默认已开启，可写可不写，用于确保配置清晰）
• tickcolor: '#000'：设置刻度线的颜色，避免因轴线隐藏导致刻度线不可见

这样配置后，热力图就会只保留底部和侧边的刻度标记，网格线和所有轴线都会被完全隐藏。

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