熱圖用顏色的每個在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">