跳到主要內容
+

圖表 - 樣式設定

本頁面整理了關於圖表自訂樣式的主題。

顏色

系列顏色

系列接受一個 color 屬性，它是用於渲染其組件的基本顏色。

<LineChart series={[{ ..., color: '#fdb462'}]} />

調色盤

圖表內建調色盤，可自動為系列分配顏色。如果特定系列缺少 color 屬性，圖表會預設根據系列的索引分配顏色。

您可以使用圖表組件上的 colors 屬性（如果您使用組合，則可以使用 <ChartContainer />）設定自訂調色盤。此屬性接受顏色陣列，或以主題模式（'dark' 或 'light'）為輸入並傳回顏色陣列的回呼函式。

提供的調色盤

函式庫包含三個調色盤。

自訂調色盤

這些調色盤也可以使用 d3-scale-chromatic 產生。或任何您喜歡的顏色操作函式庫。

以下是 d3 類別型調色盤的範例。

數值顏色

顏色也可以根據項目數值設定，使用相應座標軸的 colorMap 屬性。

在各個圖表組件的專屬文件章節中，了解更多關於如何使用此功能的資訊

colorMap 屬性可以接受以下定義的三種類型物件。

分段式調色盤

分段式配置採用 *n* 個 thresholds 值和 *n+1* 個 colors 的陣列。

{
  type: 'piecewise';
  thresholds: Value[];
  colors: string[];
}

連續性調色盤

連續性配置讓您可以將從 min 到 max 屬性的值對應到其相應的顏色。

color 屬性可以是兩個要插值的顏色陣列，或是一個插值函數，該函數會傳回對應於介於 0 和 1 之間的數字 *t* 的顏色。d3-scale-chromatic 提供了許多此類函數。

低於 min 的值會取得 min 值的顏色；同樣地，高於 max 的值會取得 max 值的顏色。預設情況下，min/max 範圍設定為 0 / 100。

{
  type: 'continuous';
  min?: Value;
  max?: Value;
  color: [string, string] | ((t: number) => string);
}

序數調色盤

此配置採用兩個屬性—values 和 colors—並將這些值對應到其各自的顏色。

如果未定義值，它將回退到 unknownColor，如果這也未定義，則它將回退到系列顏色。

此配置可用於長條圖中，以根據字串類別設定顏色。

{
  type: 'ordinal';
  values: Value[];
  colors: string[];
  unknownColor?: string;
}

覆蓋層

圖表具有 *loading* 和 *noData* 覆蓋層，在以下情況會出現：

  • loading 屬性設定為 true。
  • 沒有資料可顯示。
按下 Enter 鍵開始編輯

座標軸顯示

您可以提供座標軸資料，以便在載入資料時顯示它們。

自訂覆蓋層

若要修改覆蓋層訊息，您可以使用 message 屬性，如下所示

<BarChart
  slotProps={{
    // Custom loading message
    loadingOverlay: { message: 'Data should be available soon.' },
    // Custom message for empty chart
    noDataOverlay: { message: 'Select some data to display.' },
  }}
/>

如需更進階的自訂，請使用以下示範中的 loadingOverlay 和 noDataOverlay 插槽連結。

樣式設定

尺寸

預設情況下，圖表會調整其尺寸以填滿其父元素。但是，您可以透過提供 height 和/或 width 屬性來修改此行為。

這些屬性會將圖表的尺寸固定為給定的值（以像素為單位）。

位置

圖表版面配置的核心是繪圖區域，它對應於可用於表示資料的空間。

此空間可以使用 margin 屬性及其屬性 top、bottom、left 和 right 來定義。這些值定義了 SVG 邊框和繪圖區域之間的空間。

您可能想要修改這些值，以便為座標軸刻度留下更多空間，或減少它們以提供更多資料空間。

import { BarChart } from '@mui/x-charts/BarChart';

<BarChart
  // ...
  margin={{
    left: 80,
    right: 80,
    top: 80,
    bottom: 80,
  }}
/>

Playground

CSS

由於函式庫依賴 SVG 進行渲染，因此您可以像使用 CSS 覆寫其他 MUI System 組件一樣自訂它們。

圖表組件接受 sx 屬性。從這裡，您可以使用其類別名稱來鎖定任何子組件。

- MUI 元件庫Group AGroup BGroup CGroup DGroup E0204060

漸層和圖案

可以使用漸層和圖案來填充圖表。這可以透過將您的漸層或圖案定義作為圖表組件的子元素傳遞來完成。

請注意，以這種方式定義的漸層或圖案僅適用於 SVG。因此，像 color: "url(#Pattern)' 這樣的直接定義將導致 HTML 元素（例如工具提示）中出現未定義的顏色。此示範透過使用 CSS 變數 '--my-custom-pattern': 'url(#Pattern)' 來指定回退顏色，並使用 color: 'var(--my-custom-pattern, #123456)' 來解決此問題。

- MUI 元件庫

在工具提示上使用漸層

定義為 SVG 元素的漸層在 HTML 中不直接支援。但是，您可以使用漸層函數在 CSS 中定義漸層。此漸層可以透過在工具提示組件上設定 sx 屬性來在工具提示中使用，而不是先前範例中使用的回退顏色。

- MUI 元件庫0050100