跳至內容

ResponsiveChartContainerAPI

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

示範

匯入

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

透過閱讀這份關於最小化套件大小的指南，了解它們之間的差異。

Props

原生元件的 Props 也可用。

名稱類型預設值描述
series*Array<object>-

要顯示的 series 陣列。 每種 series 類型都有其特殊性。 請參閱適當的文件頁面以了解更多資訊。

colorsArray<string>
| func		blueberryTwilightPalette

用於為多個 series 上色的調色盤。

datasetArray<object>-

物件陣列，可用於使用其 dataKey 屬性來填入 series 和座標軸資料。

disableAxisListenerboolfalse

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

heightnumber-

圖表的 px 高度。 若未定義，則會採用父元素的高度。

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

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

margin{ bottom?: number, left?: number, right?: number, top?: number }object 取決於圖表類型。

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

onHighlightChangefunc-

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

簽名：function(highlightedItem: HighlightItemData | null) => void
  • highlightedItem 新醒目提示的項目。
pluginsArray<object>-

定義如何預先處理資料的 plugins 陣列。 若未提供，容器支援折線圖、長條圖、散佈圖和圓餅圖。

resolveSizeBeforeRenderboolfalse

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

skipAnimationbool-

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

widthnumber-

圖表的 px 寬度。 若未定義，則會採用父元素的寬度。

xAxisArray<{ 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 物件的陣列。

yAxisArray<{ 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 物件的陣列。

zAxisArray<{ 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, id?: string, max?: number, min?: number }>		-

z 軸的組態。

ref 會轉發到根元素。

原始碼

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