跳到主要內容
+

圖表 - 散佈圖

散佈圖使用平面上的點來表示兩個變數之間的關係。

基本概念

散佈圖系列應包含一個 data 屬性,其中包含物件陣列。這些物件需要 xyid 屬性。

- MUI 元件庫0501001502002503003504000100200300400500
按下 Enter 鍵開始編輯

使用資料集

如果您的資料儲存在物件陣列中,您可以使用 dataset 輔助屬性。它接受物件陣列,例如 dataset={[{a: 1, b: 32, c: 873}, {a: 2, b: 41, c: 182}, ...]}

您可以在定義系列時重複使用此資料。散佈圖系列的運作方式與其他圖表略有不同。您需要指定 `datasetKeys` 屬性,它是一個物件,需要 `x`、`y` 和 `id` 鍵。如果需要,可以使用選用的 `z` 鍵。

- MUI 元件庫0501001502002503003504004500100200300400500rainfall (mm)
按下 Enter 鍵開始編輯

互動

由於散佈圖元素可能很小,互動不一定需要精確地懸停在元素上方。當指標在繪圖區域中時,將使用最近的散佈圖元素進行互動(工具提示或醒目提示)。為此,圖表會計算 Voronoi Voronoi 圖,將指標位置對應到最近的元素。

您可以使用 `voronoiMaxRadius` 屬性定義最大半徑。如果與指標的距離大於此半徑,則不會選取任何項目。或者將 `disableVoronoi` 屬性設定為 `true`,以便僅在精確懸停在元素上方而不是 Voronoi Voronoi 區域時觸發互動。

最大半徑

若要將此功能與組合一起使用,請新增 `ChartsVoronoiHandler`。

<ChartsVoronoiHandler voronoiMaxRadius={50} />

點擊事件

散佈圖表提供 `onItemClick` 處理常式,用於處理特定散佈圖項目的點擊。它具有以下簽名。

const onItemClick = (
  event, // The mouse event.
  params, // An object that identifies the clicked elements.
) => {};

點擊圖表

// The data will appear here

如果 `disableVoronoi=true`,使用者需要精確點擊散佈圖元素,並且滑鼠事件將來自此元素。

否則,點擊行為將與 互動章節 中定義的相同,並且滑鼠事件將來自 svg 元件。

樣式

顏色比例

與其他圖表一樣,您可以直接或使用調色盤修改系列顏色

您也可以使用軸 `colorMap` 修改顏色,它將值對應到顏色。散佈圖依優先順序使用

  1. z 軸顏色
  2. y 軸顏色
  3. x 軸顏色
  4. 系列顏色

樣式文件中瞭解有關 `colorMap` 屬性的更多資訊。

<ScatterChart
  /* ... */
  series={[{ data: data.map(point => ({...point, z: point.x + point.y})) }]}
  xAxis={[{
    colorMap: {
      type: 'piecewise',
      thresholds: [-1.5, 0, 1.5],
      colors: ['#d01c8b', '#f1b6da', '#b8e186', '#4dac26'],
    }
  }]}
  yAxis={[{}]}
  zAxis={[{}]}
/>

網格

您可以使用 `grid` 屬性在圖表背景中新增網格。

請參閱 軸—網格 文件以取得更多資訊。

- MUI 元件庫0501001502002503003504000100200300400500
按下 Enter 鍵開始編輯

API

請參閱以下文件,以完整參考此處提及的元件可用的所有屬性和類別。