热图用颜色的每个在plotly

Question

值的多个范围我有使用plotly在下面拨弄https://jsfiddle.net/9ds7mryr/5/

我的意图的注释的热图是具有用于三个单独范围

<0.75 #FFA500 
>0.75 and <0.90 rgb(255,0,0) 
>0.90 #F0E7E7 

三种颜色然而，现在，即使它们稍微不同，我也会得到相同的颜色。

如何确保同一范围的值具有相同的颜色？

Answer 1

试着改变你colorscale到

[ 
    [0, '#FFA500'], 
    [0.1, '#FFA500'], 
    [0.2, '#FFA500'], 
    [0.3, '#FFA500'], 
    [0.4, '#FFA500'], 
    [0.74,'#FFA500'], 
    [0.75, 'rgb(255,0,0)'], 
    [0.89, 'rgb(255,0,0)'], 
    [0.90, '#F0E7E7'], 
    [0.95, '#F0E7E7'], 
    [1, '#F0E7E7'] 
] 

的colorscale需要是0和1，即你的值将被自动归一化是这些值之间。由于您的值开始高于0且低于1，它们将被移位。您可以使用zmin和zmax更改此行为。

var xValues = ['A', 'B', 'C', 'D', 'E', 'max', 'min']; 
 

 
var yValues = ['W']; 
 

 
var zValues = [ 
 
    [0.80, 0.110, 0.220, 0.74, 0.90, 1, 0] 
 
]; 
 

 
var colorscaleValue = [ 
 
    [0, '#FFA500'], 
 
    [0.1, '#FFA500'], 
 
    [0.2, '#FFA500'], 
 
    [0.3, '#FFA500'], 
 
    [0.4, '#FFA500'], 
 
    [0.74,'#FFA500'], 
 
    [0.75, 'rgb(255,0,0)'], 
 
    [0.89, 'rgb(255,0,0)'], 
 
    [0.90, '#F0E7E7'], 
 
    [0.95, '#F0E7E7'], 
 
    [1, '#F0E7E7'] 
 
]; 
 

 

 

 
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: true 
 
    } 
 
}; 
 

 

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

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