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