Plotly.js의 동일한 색상 표에 다양한 히트 맵이 있습니다.

Question

여러 개의 히트 맵이 있습니다. 나는 그것들을 개별적으로 계획하고있다. 그 (것)들을 그리기 위하여 나는 모든 heatmaps를위한 동일한 colorscale를 정의하는 기능을 부른다. I 맞춤 colorscale를 정의하지만, 여전히 다른 히트 맵의 값의 범위에 따라 컬러 스케일을 변경

var data = [{ 
z: Q, 
x:x, 
y:y, 
//custom colorscale; this makes sure different maps are on same scale 
colorscale: [[-3, 'rgb(166,206,227)'], [-2, 'rgb(31,120,180)'], [-1, 'rgb(178,223,138)'], [1, 'rgb(51,160,44)'], [2, 'rgb(251,154,153)'], [3, 'rgb(227,26,28)']], 
//grey colorscale 
// colorscale: 'Greys', 

// heatmap 
type: 'heatmap' 
}]; 

:이 함수는 다음과 같이 데이터 파라미터를 갖는다.

사용자 정의 colorscale을 정의하면 크기를 변경해서는 안된다고 생각했습니다. 가치의 범위가 무엇이든 상관 없습니다.

같은 크기로 히트 맵을 유지하라는 제안이 있으십니까?

Answer 1

zmin and zmax을 지정해야합니다.

data = [ 
    { 
     z: z, 
     zmin: 0, 
     zmax: 1, 
     type: "heatmap", 
     colorscale: colorscaleValue 
    } 
]; 

범위가 다르지만 색상 막대가 동일한 3 개의 임의 세트가있는 예는 아래를 참조하십시오.

var colorscaleValue = [[-3, 'rgb(166,206,227)'], [-2, 'rgb(31,120,180)'], [-1, 'rgb(178,223,138)'], [1, 'rgb(51,160,44)'], [2, 'rgb(251,154,153)'], [3, 'rgb(227,26,28)']]; 
 
var i = 0; 
 
var j = 0; 
 
var z = []; 
 
for (i = 0; i < 5; i += 1) { 
 
    z[i] = []; 
 
    for (j = 0; j < 5; j += 1) { 
 
     z[i].push(Math.random()); 
 
    } 
 
} 
 

 
var data = [ 
 
    { 
 
     z: z, 
 
     type: "heatmap", 
 
     colorscale: colorscaleValue 
 
    } 
 
]; 
 

 

 
Plotly.newPlot("plot1", data); 
 

 
for (i = 0; i < 5; i += 1) { 
 
    for (j = 0; j < 5; j += 1) { 
 
     z[i][j] = Math.random() * 2; 
 
    } 
 
} 
 

 
data = [ 
 
    { 
 
     z: z, 
 
     zmin: 0, 
 
     zmax: 1, 
 
     type: "heatmap", 
 
     colorscale: colorscaleValue 
 
    } 
 
]; 
 
Plotly.newPlot("plot2", data); 
 

 
for (i = 0; i < 5; i += 1) { 
 
    for (j = 0; j < 5; j += 1) { 
 
     z[i][j] = Math.random() * 5; 
 
    } 
 
} 
 

 
data = [ 
 
    { 
 
     z: z, 
 
     zmin: 0, 
 
     zmax: 1, 
 
     type: "heatmap", 
 
     colorscale: colorscaleValue 
 
    } 
 
]; 
 
Plotly.newPlot("plot3", data);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 
<div id="plot1" style="width:280px; height:300px;"></div> 
 
<div id="plot2" style="width:280px; height:300px;"></div> 
 
<div id="plot3" style="width:280px; height:300px;"></div>