如何在Plotly.js热图渲染完成后动态调整x轴与y轴的显示范围

解决方法 #

你修改x/y轴范围不生效的核心原因是调用的API不对：Plotly.redraw()仅用于trace数据变更后的重绘，只会同步trace类属性的修改，所以你之前代码里属于trace属性的zmin/zmax调整生效了，而属于布局属性的x/y轴范围调整不会被同步。

Plotly的动态更新API分工明确：

• Plotly.restyle()：专门用于修改trace相关属性（zmin/zmax属于这类）
• Plotly.relayout()：专门用于修改布局相关属性（x/y轴范围属于这类）

正确代码示例

// 最简写法：直接传入要修改的属性即可，不需要操作全局layout/data对象
Plotly.relayout('myDiv', {
  'xaxis.range': [0, 5],
  'yaxis.range': [0, 5]
})
Plotly.restyle('myDiv', {
  'zmin': 0,
  'zmax': 10
})

// 如果你已经修改了全局的layout和data对象，也可以按如下写法调用
// Plotly.relayout('myDiv', layout)
// Plotly.restyle('myDiv', data[0])

上述写法可以在热图渲染完成后动态生效，不需要重新调用Plotly.newPlot()重建实例。

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