绘制热图颜色轴最小和最大

Question

下面是一个带有自定义颜色轴的热图示例。颜色应该从0开始，然而，它从数据的最小值开始。我怎样才能推翻这个?

https://codepen.io/ceds/pen/PoQRYgd

var xValues = ['A', 'B', 'C', 'D', 'E'];
var yValues = ['W', 'X', 'Y', 'Z'];
var zValues = [
[0.75, 0.75, 0.75, 0.75, 0.5],
[0.6, 0.6, 0.75, 0.75, 0.5],
[0.75, 0.75, 0.75, 0.75, 0.75],
[0.5, 0.4, 0.7, 0.75, 0.4]
];
var colorscaleValue = [
[0, '#e74c3c'],
[1, '#2980b9']
];
var data = [{
x: xValues,
y: yValues,
z: zValues,
type: 'heatmap',
colorscale: colorscaleValue,
showscale: true
}];
var layout = {
title: 'Annotated Heatmap',
annotations: [],
xaxis: {
ticks: '',
side: 'top'
},
yaxis: {
ticks: '',
ticksuffix: ' ',
width: 700,
height: 700,
autosize: false
}
};
for ( var i = 0; i < yValues.length; i++ ) {
for ( var j = 0; j < xValues.length; j++ ) {
var currentValue = zValues[i][j];
if (currentValue != 0.0) {
var textColor = 'white';
}else{
var textColor = 'black';
}
var result = {
xref: 'x1',
yref: 'y1',
x: xValues[j],
y: yValues[i],
text: zValues[i][j],
font: {
family: 'Arial',
size: 12,
color: 'rgb(50, 171, 96)'
},
showarrow: false,
font: {
color: textColor
}
};
layout.annotations.push(result);
}
}
Plotly.newPlot('myDiv', data, layout);

Answer 1

我也有同样的问题。为了解决这个问题，我将coloraxis设置为字符串"coloraxis"，然后在布局字典中设置这个键，将cmin, cmax设置为我想要的。对于你的代码，像这样:

var data = [{
x: xValues,
y: yValues,
z: zValues,
type: 'heatmap',
coloraxis: 'coloraxis'
}];
var layout = {
title: 'Annotated Heatmap',
annotations: [],
coloraxis: {
colorscale: colorscaleValue,
showscale: true,
cmin: 0
cmax: 1
}
xaxis: {
ticks: '',
side: 'top'
},
yaxis: {
ticks: '',
ticksuffix: ' ',
width: 700,
height: 700,
autosize: false
}
};