ヒートマップplotly

Question

の値の複数の範囲のために、各I以下のフィドルにplotly https://jsfiddle.net/9ds7mryr/5/

私の意図を使用して注釈付きのヒートマップは、しかし、3つの個別の範囲

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

ための3つの色を持っている必要があり、今は少し違いますが、いくつかの値が同じでも色が変わります。

同じ範囲の値が同じ色になるようにするにはどうすればよいですか？

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">