圖表 - 熱圖

熱圖表以顏色變化視覺化呈現數據，以突顯跨越兩個維度的模式和趨勢。

基本概念

熱圖需要兩個具有 data 屬性的座標軸。這些數據定義了 x 和 y 類別。

系列 data 是一個包含 3 個元素的元組陣列。前兩個數字分別是單元格的 x 和 y 索引。第三個是它的值。

<Heatmap
  xAxis={[{ data: [1, 2, 3, 4] }]}
  yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
  series={[{ data }]}
  margin={{ top: 5, right: 5, left: 20 }}
  height={300}
/>

<Heatmap
  xAxis={[{ data: [1, 2, 3, 4] }]}
  yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
  series={[{ data }]}
  margin={{ top: 5, right: 5, left: 20 }}
  height={300}
/>

按下 Enter 開始編輯

自訂

顏色映射

要自訂顏色映射，請使用 zAxis 配置。您可以使用分段或連續的顏色映射。

高亮

您可以通過將 highlightScope.highlight 設置為 'item' 來選擇高亮顯示懸停的元素。要淡化其他項目，請將 highlightScope.fade 設置為 'global'。

<Heatmap
  xAxis={[{ data: [1, 2, 3, 4] }]}
  yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
  series={[{ data, highlightScope: { highlight: 'item', fade: 'global' } }]}
  margin={{ top: 5, right: 5, left: 20 }}
  height={300}
/>

<Heatmap
  xAxis={[{ data: [1, 2, 3, 4] }]}
  yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
  series={[{ data, highlightScope: { highlight: 'item', fade: 'global' } }]}
  margin={{ top: 5, right: 5, left: 20 }}
  height={300}
/>

按下 Enter 開始編輯

默認情況下，高亮/淡化效果是通過將 CSS 屬性 filter: saturate(...) 應用於單元格來實現的。要修改此樣式，請使用 heatmapClasses.highlighted 和 heatmapClasses.faded CSS 類別來覆蓋應用的樣式。

在下面的演示中，我們將高亮飽和度替換為邊框半徑，並降低淡化單元格的飽和度。

座標軸

熱圖座標軸可以像任何其他圖表座標軸一樣進行自訂。可用選項在專門的頁面中提供。

圖例 🚧

標籤 🚧

自訂項目

<Heatmap
  slots={{ cell: CustomCell }}
  xAxis={[{ data: [1, 2, 3, 4] }]}
  yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
  series={[{ data, highlightScope: { highlight: 'item' } }]}
  margin={{ top: 5, right: 5, left: 20 }}
  height={300}
/>

<Heatmap
  slots={{ cell: CustomCell }}
  xAxis={[{ data: [1, 2, 3, 4] }]}
  yAxis={[{ data: ['A', 'B', 'C', 'D', 'E'] }]}
  series={[{ data, highlightScope: { highlight: 'item' } }]}
  margin={{ top: 5, right: 5, left: 20 }}
  height={300}
/>

按下 Enter 開始編輯

API

請參閱下面的文檔，以獲取此處提及的組件可用的所有 props 和類別的完整參考。