在plot .js中以相同的色度绘制各种热图
Various heatmaps on same colorscale in Plotly.js
我有多个热图。我把它们分别画出来。为了绘制它们,我调用了为所有热图定义相同色阶的函数。函数的data参数如下:
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
和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>
相关文章:
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 有没有一个javascript图形绘制库可以进行气球树布局
- 使用相同的数据集绘制各种符号
- 使用onclick绘制SVG路径
- 在谷歌地图上绘制位置数据库
- 用chart.js绘制条形图
- “可绘制地图”设置地图选项“纬度-经度”
- 多维数据集网格未在指定的分区中绘制
- 使用谷歌图表在x轴上绘制日期
- 使用fabric.js从矩形区域获取对象,并将该区域绘制到画布上
- 如何在React Native中绘制图形
- 画布中绘制的矩形区域的弹出工具提示
- 如何在OpenLayers中获取动态绘制的多边形的坐标
- 画布:逐像素绘制图像并请求动画帧计时
- D3从嵌套的JSON中绘制第二个圆环图
- 如何用d3.js绘制折线图
- 在WebGL中绘制多个二维图像
- JSXGraph:如何绘制带有箭头和无点标记的矢量
- 用图像而不是颜色填充对象(将图像绘制到画布上)
- 在plot .js中以相同的色度绘制各种热图