如何自定义Plotly.js热力图X轴范围并保持绘图全宽？

要实现自定义X轴范围（0mm到321mm）同时保持绘图全宽，且不手动添加x/y数组导致数据体积增大，你可以利用Plotly热图的x0和dx属性，配合布局中的X轴配置来实现，具体如下：

修改后的代码示例 #

JavaScript部分

var data = [{
  z: [[1, 2, 3, 4], [5, 6, 7, 8]],
  type: 'heatmap',
  x0: 0, // X轴第一个单元格的起始位置
  dx: 321 / 4 // 每个X轴单元格的宽度（总范围321，共4个单元格）
}];

Plotly.newPlot('myDiv', data, {
  xaxis: {
    range: [0, 321], // 强制X轴范围为0到321mm
    autorange: false, // 关闭自动范围计算
    ticksuffix: " mm"
  }
}, {});

HTML部分

<script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script>
<div id="myDiv"></div>

关键参数说明 #

• x0：定义热图第一个X方向单元格的起始坐标，对应目标区间的起点0。
• dx：设置每个X方向单元格的宽度，因为数据是4列，总范围321，所以计算为321/4，确保所有单元格刚好填满0到321的区间。
• xaxis.range：明确指定X轴的显示范围，配合autorange: false禁用Plotly的自动范围计算，直接锁定自定义区间。

这种方式不需要手动生成包含大量元素的x数组，完全避免了数据对象体积膨胀，对500×1000的大数据场景非常友好，同时热图会自动填充整个X轴范围，保持全宽显示。

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