如何在Plotly.js中修改等高线图悬停时的Z轴标签为‘Value’

很简单，你只需要在contour类型的数据对象里添加hovertemplate属性，自定义悬停提示的内容就能实现这个需求。

具体来说，hovertemplate允许你完全控制鼠标悬停时显示的文本，用%{x}、%{y}、%{z}分别对应X、Y、Z轴的数值，把原来的Z标签替换成你想要的“Value”就行。另外加上<extra></extra>可以去掉默认显示的trace名称，让提示更干净。

修改后的完整代码如下：

var data = [ 
  { 
    z: [[10, 10.625, 12.5, 15.625, 20], [5.625, 6.25, 8.125, 11.25, 15.625], [2.5, 3.125, 5., 8.125, 12.5], [0.625, 1.25, 3.125, 6.25, 10.625], [0, 0.625, 2.5, 5.625, 10]], 
    type: 'contour', 
    colorscale: [[0, 'rgb(166,206,227)'], [0.25, 'rgb(31,120,180)'], [0.45, 'rgb(178,223,138)'], [0.65, 'rgb(51,160,44)'], [0.85, 'rgb(251,154,153)'], [1, 'rgb(227,26,28)']],
    hovertemplate: 'X: %{x}<br>Y: %{y}<br>Value: %{z}<extra></extra>'
  } 
];
var layout = { title: 'Custom Contour Plot Colorscale' };
Plotly.newPlot('myDiv', data, layout);

这样修改之后，当你鼠标悬停在等高线图上时，原来的Z标签就会变成“Value”，X和Y的数值显示不受影响，完全符合你的需求。

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