跳到主要內容

BarChartAPI

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

示範

匯入

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

請閱讀這份關於最小化 bundle 大小的指南，以了解差異。

Props

原生元件的 Props 也可用。

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

要在長條圖中顯示的 series。 BarSeriesType 物件的陣列。

axisHighlight{ x?: 'band'
| 'line'
| 'none', y?: 'band'
| 'line'
| 'none' }		-

座標軸醒目提示的設定。 預設在長條方向設定為 'band'。 取決於 layout prop。

請參閱醒目提示文件以取得更多詳細資訊。

barLabel'value'
| func		-

如果提供，此函式將用於格式化長條的標籤。 可以設定為 'value' 以顯示目前的值。

borderRadiusnumber-

定義長條元件的邊框半徑。

bottomAxisobject
| string		xAxisIds[0] 第一個提供的座標軸的 ID

指出要在圖表底部顯示哪個座標軸。 可以是字串 (座標軸的 ID) 或 ChartsXAxisProps 物件。

colorsArray<string>
| func		blueberryTwilightPalette

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

datasetArray<object>-

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

disableAxisListenerboolfalse

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

grid{ horizontal?: bool, vertical?: bool }-

在背景中顯示笛卡爾網格的選項。

heightnumber-

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

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

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

layout'horizontal'
| 'vertical'		'vertical'

長條元件的方向。

leftAxisobject
| string		yAxisIds[0] 第一個提供的座標軸的 ID

指出要在圖表左側顯示哪個座標軸。 可以是字串 (座標軸的 ID) 或 ChartsYAxisProps 物件。

loadingboolfalse

如果為 true，則會顯示載入覆蓋層。

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

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

onAxisClickfunc-

為 onClick 事件呼叫的函式。 第二個引數包含目前滑鼠位置所有折線/長條元件的相關資訊。

簽名:function(event: MouseEvent, data: null | AxisData) => void
  • event 在 <svg/> 元素上記錄的滑鼠事件。
  • data 關於點擊的座標軸以及與其相關聯的項目的資料。
onHighlightChangefunc-

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

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

當點擊長條項目時觸發的回呼。

簽名:function(event: React.MouseEvent, barItemIdentifier: BarItemIdentifier) => void
  • event 回呼的事件來源。
  • barItemIdentifier 長條項目識別符。
resolveSizeBeforeRenderboolfalse

圖表將嘗試等待父容器解析其大小，然後再首次呈現。
在某些情況下，這可能很有用，例如在網格內使用時，圖表在首次呈現後似乎會成長。

rightAxisobject
| string		null

指出要在圖表右側顯示哪個座標軸。 可以是字串 (座標軸的 ID) 或 ChartsYAxisProps 物件。

skipAnimationbool-

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

slotPropsobject{}

用於每個元件 slot 的 props。

slotsobject{}

可覆寫的元件 slots。

請參閱下方的 Slots API 以取得更多詳細資訊。

tooltip{ axisContent?: elementType, classes?: object, itemContent?: elementType, slotProps?: object, slots?: object, trigger?: 'axis'
| 'item'
| 'none' }		-

工具提示的設定。

請參閱工具提示文件以取得更多詳細資訊。

topAxisobject
| string		null

指出要在圖表頂部顯示哪個座標軸。 可以是字串 (座標軸的 ID) 或 ChartsXAxisProps 物件。

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

ref 轉發到根元素。

主題預設 props

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

Slots

Slot 名稱類別名稱預設元件描述
axisContentDefaultChartsAxisTooltipContent在由座標軸事件觸發時，用於顯示工具提示內容的自訂元件。
axisLabelChartsText用於座標軸標籤的自訂元件。
axisLine'line'用於座標軸主線的自訂元件。
axisTick'line'用於座標軸刻度的自訂元件。
axisTickLabelChartsText用於刻度標籤的自訂元件。
barBarElementPath呈現長條的元件。
barLabelBarLabel呈現長條標籤的元件。
itemContentDefaultChartsItemTooltipContent在由項目事件觸發時，用於顯示工具提示內容的自訂元件。
legendDefaultChartsLegend圖例的自訂呈現。
loadingOverlayChartsLoadingOverlay當圖表處於載入狀態時呈現的覆蓋層元件。
noDataOverlayChartsNoDataOverlay當圖表沒有資料可顯示時呈現的覆蓋層元件。
popperChartsTooltipRoot用於工具提示 popper 的自訂元件。

原始碼

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