LineChartAPI

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

示範

如需此 React 組件的使用範例和詳細資訊，請造訪組件示範頁面

匯入

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

請閱讀此關於最小化套件大小的指南，以瞭解差異。

Props

原生組件的 props 也可用。

名稱	類型	預設值	描述
series*	Array<object>	-	要在折線圖中顯示的 series。 LineSeriesType 物件的陣列。
axisHighlight	{ x?: 'band' \| 'line' \| 'none', y?: 'band' \| 'line' \| 'none' }	{ x: 'line' }	座標軸醒目提示的設定。請參閱醒目提示文件以瞭解更多詳細資訊。
bottomAxis	object \| string	xAxisIds[0] 第一個提供的座標軸的 ID	指示要在圖表底部顯示哪個座標軸。可以是字串（座標軸的 ID）或 `ChartsXAxisProps` 物件。
colors	Array<string> \| func	blueberryTwilightPalette	用於為多個 series 上色的調色盤。
dataset	Array<object>	-	物件陣列，可用於使用其 `dataKey` 屬性來填入 series 和座標軸資料。
disableAxisListener	bool	false	如果 `true`，圖表將不會監聽滑鼠移動事件。這可能會破壞互動功能，但會提高效能。
disableLineItemHighlight	bool	-	如果 `true`，則渲染折線醒目提示項目。
experimentalMarkRendering	bool	-	如果 `true`，mark 將渲染 `<circle />` 而不是 `<path />`，並捨棄主題覆寫以加快渲染速度。
grid	{ horizontal?: bool, vertical?: bool }	-	在背景中顯示笛卡爾網格的選項。
height	number	-	圖表的 px 高度。如果未定義，則採用父元素的高度。
highlightedItem	{ dataIndex?: number, seriesId?: number \| string }	-	目前醒目提示的項目。將醒目提示變成受控的 prop。
leftAxis	object \| string	yAxisIds[0] 第一個提供的座標軸的 ID	指示要在圖表左側顯示哪個座標軸。可以是字串（座標軸的 ID）或 `ChartsYAxisProps` 物件。
loading	bool	false	如果 `true`，則會顯示載入覆蓋層。
margin	{ bottom?: number, left?: number, right?: number, top?: number }	object 取決於圖表類型。	SVG 和繪圖區域之間的邊距。它用於為額外資訊（例如 x 軸和 y 軸或圖例）留出一些空間。接受具有可選屬性的物件：`top`、`bottom`、`left` 和 `right`。
onAreaClick	func	-	當點擊區域元素時觸發的回呼。
onAxisClick	func	-	為 onClick 事件呼叫的函式。第二個引數包含目前滑鼠位置上所有折線/長條元素的資訊。簽名：`function(event: MouseEvent, data: null \| AxisData) => void` `event` 在 `<svg/>` 元素上記錄的滑鼠事件。 `data` 關於點擊的座標軸和與其關聯的項目的資料。
onHighlightChange	func	-	當醒目提示的項目變更時觸發的回呼。簽名：`function(highlightedItem: HighlightItemData \| null) => void` `highlightedItem` 新醒目提示的項目。
onLineClick	func	-	當點擊折線元素時觸發的回呼。
onMarkClick	func	-	當點擊 mark 元素時觸發的回呼。
resolveSizeBeforeRender	bool	false	圖表將嘗試等待父容器解析其大小，然後再第一次渲染。在某些情況下，當圖表在第一次渲染後似乎會增長時，這可能會很有用，例如在網格內使用時。
rightAxis	object \| string	null	指示要在圖表右側顯示哪個座標軸。可以是字串（座標軸的 ID）或 `ChartsYAxisProps` 物件。
skipAnimation	bool	false	如果 `true`，則跳過動畫。
slotProps	object	{}	用於每個組件 slot 的 props。
slots	object	{}	可覆寫的組件 slot。請參閱下方的Slots API以瞭解更多詳細資訊。
tooltip	{ axisContent?: elementType, classes?: object, itemContent?: elementType, slotProps?: object, slots?: object, trigger?: 'axis' \| 'item' \| 'none' }	{ trigger: 'item' }	工具提示的設定。請參閱工具提示文件以瞭解更多詳細資訊。
topAxis	object \| string	null	指示要在圖表頂部顯示哪個座標軸。可以是字串（座標軸的 ID）或 `ChartsXAxisProps` 物件。
width	number	-	圖表的 px 寬度。如果未定義，則採用父元素的寬度。
xAxis	Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, fill?: string, hideTooltip?: bool, id?: number \| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date \| number, min?: Date \| number, position?: 'bottom' \| 'top', reverse?: bool, scaleType?: 'band' \| 'linear' \| 'log' \| 'point' \| 'pow' \| 'sqrt' \| 'time' \| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func \| object \| bool> \| func \| object, tickFontSize?: number, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, valueFormatter?: func }>	-	x 軸的設定。如果未提供，則會使用預設座標軸設定。 AxisConfig 物件的陣列。
yAxis	Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date \| number \| string> } \| { color: Array<string> \| func, max?: Date \| number, min?: Date \| number, type: 'continuous' } \| { colors: Array<string>, thresholds: Array<Date \| number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, fill?: string, hideTooltip?: bool, id?: number \| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date \| number, min?: Date \| number, position?: 'left' \| 'right', reverse?: bool, scaleType?: 'band' \| 'linear' \| 'log' \| 'point' \| 'pow' \| 'sqrt' \| 'time' \| 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func \| object \| bool> \| func \| object, tickFontSize?: number, tickInterval?: 'auto' \| array \| func, tickLabelInterval?: 'auto' \| func, tickLabelPlacement?: 'middle' \| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end' \| 'extremities' \| 'middle' \| 'start', tickSize?: number, valueFormatter?: func }>	-	y 軸的設定。如果未提供，則會使用預設座標軸設定。 AxisConfig 物件的陣列。

ref 轉發到根元素。

主題預設 props

您可以使用 MuiLineChart 透過主題變更此組件的預設 props。

Slots

Slot 名稱	預設組件	描述
area	`AnimatedArea`	渲染區域的組件。
axisContent	`DefaultChartsAxisTooltipContent`	用於在由座標軸事件觸發時顯示工具提示內容的自訂組件。
axisLabel	`ChartsText`	用於座標軸標籤的自訂組件。
axisLine	`'line'`	用於座標軸主線的自訂組件。
axisTick	`'line'`	用於座標軸刻度的自訂組件。
axisTickLabel	`ChartsText`	用於刻度標籤的自訂組件。
itemContent	`DefaultChartsItemTooltipContent`	用於在由項目事件觸發時顯示工具提示內容的自訂組件。
legend	`DefaultChartsLegend`	圖例的自訂渲染。
line	`LineElementPath`	渲染折線的組件。
lineHighlight
loadingOverlay	`ChartsLoadingOverlay`	當圖表處於載入狀態時渲染的覆蓋組件。
mark
noDataOverlay	`ChartsNoDataOverlay`	當圖表沒有資料可顯示時渲染的覆蓋組件。
popper	`ChartsTooltipRoot`	用於工具提示 popper 的自訂組件。

原始碼

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