plotly.js 绘制热度图 (二）

版权声明：本文为博主原创文章，未经博主允许不得转载。 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的值。

不规格的bar