跳到主要內容

SparkLineChartAPI

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

範例展示

匯入

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

請閱讀本指南，瞭解關於最小化 bundle size 的差異。

Props

也提供原生組件的 Props。

名稱類型預設值描述
data*Array<number>-

用於繪製圖表的資料。

areaboolfalse

設定為 true 以填滿迷你折線圖區域。如果 plotType='bar'，則無效。

colorsArray<string>
| func		blueberryTwilightPalette

用於為多個系列著色的調色盤。

datasetArray<object>-

可用於使用其 dataKey 屬性來填充系列和座標軸資料的物件陣列。

disableAxisListenerboolfalse

如果為 true，圖表將不會監聽滑鼠移動事件。這可能會破壞互動功能，但會提高效能。

heightnumber-

圖表的高度，單位為 px。如果未定義，則會採用父元素的高度。

highlightedItem{ dataIndex?: number, seriesId?: number
| string }		-

目前醒目提示的項目。將醒目提示功能變成受控的 prop。

margin{ bottom?: number, left?: number, right?: number, top?: number }{ top: 5, bottom: 5, left: 5, right: 5, }

SVG 和繪圖區域之間的邊距。它用於為額外資訊（例如 x 軸和 y 軸或圖例）保留一些空間。接受具有可選屬性的物件：top、bottom、left 和 right。

onHighlightChangefunc-

當醒目提示的項目變更時觸發的回呼函式。

簽名：function(highlightedItem: HighlightItemData | null) => void
  • highlightedItem 新醒目提示的項目。
plotType'bar'
| 'line'		'line'

使用的繪圖類型。

resolveSizeBeforeRenderboolfalse

圖表將嘗試等待父容器解析其大小，然後再首次渲染。
在某些情況下，當圖表在首次渲染後看起來會增長時（例如在格線內使用時），這會很有用。

showHighlightboolfalse

設定為 true 以醒目提示值。使用折線圖時，會顯示一個點。使用長條圖時，會顯示醒目提示帶。

showTooltipboolfalse

設定為 true 以在迷你折線圖中啟用工具提示。

skipAnimationbool-

如果為 true，則會跳過動畫。如果未設定或為 false，則動畫會遵循使用者的 prefers-reduced-motion 設定。

slotPropsobject{}

用於每個組件 slot 的 props。

slotsobject{}

可覆寫的組件 slots。

有關更多詳細資訊，請參閱下方的 Slots API。

valueFormatterfunc(value: number | null) => (value === null ? '' : value.toString())

工具提示使用的格式化工具。

簽名：function(value: number) => string
  • value 要格式化的值。

傳回值：格式化後的值。

widthnumber-

圖表的寬度，單位為 px。如果未定義，則會採用父元素的寬度。

xAxis{ 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 }		-

xAxis 設定。請注意，它是一個單一的 AxisConfig 物件，而不是設定陣列。

yAxis{ 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 }		-

yAxis 設定。請注意，它是一個單一的 AxisConfig 物件，而不是設定陣列。

ref 會轉發到根元素。

Slots

Slot 名稱類別名稱預設組件描述
areaAnimatedArea用於渲染區域的組件。
axisContentDefaultChartsAxisTooltipContent用於在座標軸事件觸發時顯示工具提示內容的自訂組件。
barBarElementPath用於渲染長條的組件。
itemContentDefaultChartsItemTooltipContent用於在項目事件觸發時顯示工具提示內容的自訂組件。
lineLineElementPath用於渲染折線的組件。
lineHighlight
mark
popperChartsTooltipRoot用於工具提示 popper 的自訂組件。

原始碼

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