ChartsReferenceLineAPI

React ChartsReferenceLine 組件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。

示範

有關此 React 組件用法的範例和詳細資訊，請造訪組件示範頁面

圖表 - 座標軸

匯入

import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine';
// or
import { ChartsReferenceLine } from '@mui/x-charts';
// or
import { ChartsReferenceLine } from '@mui/x-charts-pro';

透過閱讀關於最小化 bundle size 的指南，瞭解它們之間的差異。

Props

名稱	類型	預設值	描述
axisId	number \| string	第一個定義的座標軸的 `id`。	用於參考值的座標軸 id。
classes	object	-	覆寫或擴展應用於組件的樣式。請參閱下方CSS 類別 API 以取得更多詳細資訊。
label	string	-	沿著參考線顯示的標籤。
labelAlign	'end' \| 'middle' \| 'start'	'middle'	如果標籤位於圖表繪圖區域中，則為對齊方式。
labelStyle	object	-	應用於標籤的樣式。
lineStyle	object	-	應用於線條的樣式。
spacing	number \| { x?: number, y?: number }	5	標籤周圍的額外空間，以 px 為單位。可以是數字或物件 `{ x, y }`，以區分與參考線的間距以及與座標軸的間距。
x	Date \| number \| string	-	與參考線關聯的 x 值。如果已定義，則參考線將為垂直線。
y	Date \| number \| string	-	與參考線關聯的 y 值。如果已定義，則參考線將為水平線。

組件無法持有 ref。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。它們在觸發特定狀態時應用於組件的插槽。

類別名稱	規則名稱	描述
.MuiChartsReferenceLine-horizontal	horizontal	如果參考線為水平線，則應用於根元素。
.MuiChartsReferenceLine-label	label	應用於參考標籤的樣式。
.MuiChartsReferenceLine-line	line	應用於參考線的樣式。
.MuiChartsReferenceLine-root	root	應用於根元素的樣式。
.MuiChartsReferenceLine-vertical	vertical	如果參考線為垂直線，則應用於根元素。

您可以使用以下其中一種自訂選項覆寫組件的樣式

使用全域類別名稱。
使用規則名稱作為自訂主題中組件styleOverrides 屬性的一部分。

原始碼

如果您在此頁面中找不到資訊，請考慮查看組件的實作以取得更多詳細資訊。