跳到主要內容
+

圖表 - 圖例

圖例是將符號和顏色對應到系列標籤的 UI 元素。

基本顯示

在圖表組件中，圖例將系列與 label 屬性及其顏色連結。

- MUI 元件庫−20−15−10−505101520−20−1001020
按下 Enter 開始編輯

自訂

位置

圖例可以 'column' 或 'row' 佈局顯示，由 direction 屬性控制。

也可以使用 position: { vertical, horizontal } 屬性移動圖例，該屬性定義圖例在 SVG 內如何對齊。

  • vertical 可以是 'top'、'middle' 或 'bottom'。
  • horizontal 可以是 'left'、'middle' 或 'right'。

您可以透過 padding 屬性為給定的 position 新增間距，可以是數字或物件 { top, bottom, left, right }。此 padding 將在 SVG 邊框和圖例之間新增空間。

預設情況下，圖例放置在圖表上方。

- MUI 元件庫
import { PieChart } from '@mui/x-charts/PieChart';

<PieChart
  margin={{ top: 100, bottom: 100, left: 100, right:100 }}
  {/** ... */}
  slotProps={{
    legend: {
      direction: 'row',
      position: { vertical: 'top', horizontal: 'middle' },
      padding: 0,
    },
  }}
/>

遊樂場

隱藏

您可以使用屬性 slotProps.legend.hidden 隱藏圖例。

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

尺寸

在圖例內部，您可以使用 itemMarkWidth 和 itemMarkHeight 屬性自訂標記的寬度和高度像素值。

您也可以存取 markGap 屬性來變更標記及其標籤之間的間距，或使用 itemGap 變更兩個圖例項目之間的間距。這兩個屬性都會影響以像素定義的值。

- MUI 元件庫
import { PieChart } from '@mui/x-charts/PieChart';

<PieChart
  margin={{ top: 100, bottom: 10, left: 10, right:100 }}
  {/** ... */}
  slotProps={{
    legend: {
      direction: props.direction,
      position: {
        vertical: 'middle',
        horizontal: 'right',
      },
      itemMarkWidth: 20,
      itemMarkHeight: 2,
      markGap: 5,
      itemGap: 10,
    }
  }}
/>

遊樂場

標籤樣式

若要在圖例標籤中換行，請使用特殊的 \n 字元。若要自訂標籤樣式，您不應使用 CSS。而是將樣式物件傳遞給 labelStyle 屬性。

- MUI 元件庫
import { PieChart } from '@mui/x-charts/PieChart';

<PieChart
  margin={{ top: 100, bottom: 10, left: 10, right:100 }}
  {/** ... */}
  series={[
    { ..., label: 'series A'}
    ...
  ]}
  slotProps={{
    legend: {
      labelStyle: {
        fontSize: 14,
        fill: 'blue',
      },
    },
  }}
/>

遊樂場

顏色圖例

若要顯示與 colorMap 關聯的圖例，您可以使用

  • 如果您使用 colorMap.type='continuous'，則使用 <ContinuousColorLegend />
  • 如果您使用 colorMap.type='piecewise'，則使用 <PiecewiseColorLegend />。

選取資料

若要選取要表示的顏色對應，請使用以下屬性

  • axisDirection 可以是 'x'、'y' 或 'z'。它指示哪個軸包含 colorMap 定義。
  • axisId 在選定方向包含多個軸時要使用的軸 ID。

相對於 1961-1990 平均值的全球溫度異常

位置

此組件的位置與系列圖例的位置方式完全相同。

連續顏色對應

若要修改漸層的形狀，請使用 length 和 thickness 屬性。length 可以是數字（以 px 為單位）或百分比字串。"100%" 對應於 SVG 尺寸。

若要格式化標籤，請使用 minLabel/maxLabel。它們接受要顯示的字串。或函式 ({value, formattedValue}) => string。

標籤和漸層條對齊方式可以透過 align 屬性修改。

import { LineChart } from '@mui/x-charts/LineChart';
import { ContinuousColorLegend } from '@mui/x-charts/ChartsLegend';

<LineChart
  margin={{ top: 50, right: 20 }}
  {/** ... */}
>
  <ContinuousColorLegend
      axisDirection="x"
      position={{ vertical: 'top', horizontal: 'middle' }}
      direction="row"
      length="50%"
      thickness={5}
      align="middle"
      labelStyle={{ fontSize: 10 }}
    />
</LineChart>

遊樂場

分段顏色對應

分段圖例與系列圖例非常相似。它接受相同的屬性進行自訂。

hideFirst 和 hideLast 屬性允許隱藏兩個極端片段：低於最小閾值的值和高於最大閾值的值。

若要覆寫預設產生的標籤，請提供 labelFormatter 屬性。它會取得片段的最小值/最大值並傳回標籤。

對於第一個和最後一個片段，值可以為 null。傳回 null 會從圖例中移除該片段。

labelFormatter = ({ min, max, formattedMin, formattedMax }) => string | null;

import { LineChart } from '@mui/x-charts/LineChart';
import { PiecewiseColorLegend } from '@mui/x-charts/ChartsLegend';

<LineChart
  margin={{ top: 50, right: 20 }}
  {/** ... */}
>
  <PiecewiseColorLegend
      axisDirection="x"
      position={{ vertical: 'top', horizontal: 'middle' }}
      direction="row"
      padding={0}
      labelStyle={{ fontSize: 10 }}
    />
</LineChart>

遊樂場

點擊事件

您可以將 onItemClick 函式傳遞給 ChartsLegend 或 PiecewiseColorLegend 組件來處理點擊事件。它們都提供以下簽章。

const clickHandler = (
  event, // The click event.
  context, // An object that identifies the clicked item.
  index, // The index of the clicked item.
) => {};

context 物件包含不同的屬性，具體取決於圖例類型。點擊圖例項目以查看其內容。

圖表圖例

- MUI 元件庫

圓餅圖圖例

- MUI 元件庫

圓餅圖圖例

- MUI 元件庫

點擊圖表

// Index from item click: 

// Context from item click
// The data will appear here

API

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