跳到内容

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';

阅读本指南，了解有关最小化包大小的差异。

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 }object 取决于图表类型。

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

用于每个组件插槽的 props。

slotsobject{}

可覆盖的组件插槽。

有关更多详细信息，请参阅下面的 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。

插槽

插槽名称类名默认组件描述
axisContentDefaultChartsAxisTooltipContent用于在坐标轴事件触发时显示工具提示内容的自定义组件。
axisLabelChartsText坐标轴标签的自定义组件。
axisLine'line'坐标轴主线的自定义组件。
axisTick'line'坐标轴刻度的自定义组件。
axisTickLabelChartsText刻度标签的自定义组件。
barBarElementPath渲染条形图的组件。
barLabelBarLabel渲染条形图标签的组件。
itemContentDefaultChartsItemTooltipContent用于在项事件触发时显示工具提示内容的自定义组件。
legendDefaultChartsLegend图例的自定义渲染。
loadingOverlayChartsLoadingOverlay当图表处于加载状态时渲染的覆盖层组件。
noDataOverlayChartsNoDataOverlay当图表没有数据要显示时渲染的覆盖层组件。
popperChartsTooltipRoot工具提示 popper 的自定义组件。

源代码

如果您在此页面中找不到信息，请考虑查看组件的实现以获取更多详细信息。