跳到内容

ChartContainerProAPI

React ChartContainerPro 组件的 API 参考文档。了解此导出的模块的 props、CSS 和其他 API。

Demos

Import

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

通过阅读关于最小化 bundle size 的指南，了解它们之间的区别。

Props

NameTypeDefaultDescription
height*number-

图表的高度，单位为像素 (px)。

series*Array<object>-

要显示的系列数组。每种系列类型都有其独特性。请参阅相应的文档页面以了解更多信息。

width*number-

图表的宽度，单位为像素 (px)。

colorsArray<string>
| func		blueberryTwilightPalette

用于为多个系列着色的调色板。

datasetArray<object>-

一个对象数组，可用于使用其 dataKey 属性填充系列和坐标轴数据。

disableAxisListenerboolfalse

如果为 true，图表将不会监听鼠标移动事件。这可能会破坏交互功能，但会提高性能。

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

当前高亮显示的项目。将高亮显示转换为受控 prop。

margin{ bottom?: number, left?: number, right?: number, top?: number }object Depends on the charts type.

SVG 和绘图区域之间的边距。它用于为额外信息（例如 x 轴和 y 轴或图例）留出一些空间。接受一个对象，其中包含可选属性：top、bottom、left 和 right。

onHighlightChangefunc-

当高亮显示的项目更改时触发的回调。

Signature:function(highlightedItem: HighlightItemData | null) => void
  • highlightedItem 新高亮显示的项目。
onZoomChangefunc-

当缩放已更改时触发的回调。

Signature:function(zoomData: Array) => void
  • zoomData 更新后的缩放数据。
pluginsArray<object>-

一个插件数组，定义如何预处理数据。如果未提供，则容器支持折线图、柱状图、散点图和饼图。

skipAnimationbool-

如果为 true，则跳过动画。如果未设置或为 false，则动画将遵循用户的 prefers-reduced-motion 设置。

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, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>		-

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, zoom?: { filterMode?: 'discard'
| 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number }
| bool }>		-

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 轴的配置。

zoomArray<{ axisId: number
| string, end: number, start: number }>		-

与每个轴相关的缩放数据列表。

该组件无法持有 ref。

Source code

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