Plotly.js 中相同色标的各种热图
Various heatmaps on same colorscale in Plotly.js
我有多个热图。我正在分别绘制它们。为了绘制它们,我调用了为所有热图定义相同色标的函数。该函数具有如下数据参数:
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'
}];
我已经定义了自定义色标,但它仍然会根据不同热图的值范围更改色标。
我认为定义自定义色标不应该改变比例;无论值的范围是什么。
关于将热图保持在同一比例有什么建议吗?
您需要指定zmin
and zmax
。
data = [
{
z: z,
zmin: 0,
zmax: 1,
type: "heatmap",
colorscale: colorscaleValue
}
];
请参阅下面的示例,其中包含三个范围不同但颜色条相同的随机集合。
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>
我有多个热图。我正在分别绘制它们。为了绘制它们,我调用了为所有热图定义相同色标的函数。该函数具有如下数据参数:
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'
}];
我已经定义了自定义色标,但它仍然会根据不同热图的值范围更改色标。
我认为定义自定义色标不应该改变比例;无论值的范围是什么。
关于将热图保持在同一比例有什么建议吗?
您需要指定zmin
and zmax
。
data = [
{
z: z,
zmin: 0,
zmax: 1,
type: "heatmap",
colorscale: colorscaleValue
}
];
请参阅下面的示例,其中包含三个范围不同但颜色条相同的随机集合。
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>