版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/liyangyang08/article/details/79824790
plotly.js 绘制热度图 (二)
- 上文我们讲了基本的热度图是如何绘制的,现在我们主要讲热度图的差值与色标卡的相关操作
- 我们先看效果图数据与上文一样。
绘制
- html代码与前门相同,我们这里主要说js的更改
var data = [
{
z: [[1, 20, 30], [20, 1, 60], [30, 60, 1]],
colorscale: [
[0, 'rgb(0,0,139)'],
[0.25, 'rgb(0,0,255)'],
[0.45, 'rgb(0,255,255)'],
[0.65, 'rgb(0,128,0)'],
[0.85, 'rgb(255,255,0)'],
[1, 'rgb(255,0,0)']
],
colorbar: {
// thicknessmode:'fraction',
x:1.04,
//y:0.5,
len:1.06,
tickformat:'.1e',
exponentformat :'E',
tickwidth:'1',
// tickformat:'6f',
ticks:'outside',
thickness: 8,
xanchor: 'left',
tickmode:'array',
ticktext:[1,2,3,4,5,6],
tickvals:[1,2,3,4,5,6],
xpad: 0
},
zsmooth: 'best',
zmin: 0,
zmax: 6,
type: 'heatmap'
}
];
Plotly.plot('myDiv', data);
参数讲解
- colorscale 就是颜色分布做了归一化默认会自动进行渐变
- colorbar主要就是bar的部分
- x 设置x相对于bar的位置默认的是1.02值是-2到3之间
- len 值必顺大于等于0,默认为1,设计颜色条的长度,不包括两端的填充。
- tickformat 支持D3的格式可以查看数字或者时间
- tickmode 必须为数组时下面的ticktext(位置)和tickvals(值0才会升效
- zsmooth 是否差值
- zmax和zmin也会影响到ticitext与tickvals的值。