Plotly.js中相同色阶的各种热图

时间:2016-08-20 23:06:11

标签: javascript colors heatmap plotly

我有多个热图。我正在分别策划它们。为了绘制它们,我调用了为所有热图定义相同色阶的功能。该函数的数据参数如下:

Person@682a0b20
Person@3d075dc0
Person@214c265e
Person@448139f0

我已定义了自定义色阶,但仍会根据不同热图的值范围更改色阶。

我认为定义自定义色阶不应该改变比例;无论价值范围是多少。

有关将热图保持在相同规模的任何建议吗?

1 个答案:

答案 0 :(得分:3)

您需要指定https://jsfiddle.net/Lfq1negw/1/

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);
&#13;
<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>
&#13;
&#13;
&#13;