跳到内容

ChartContainerAPI

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

演示

导入

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

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

Props

原生组件的 Props 也可用。

名称类型默认值描述
高度*数字-

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

系列*对象数组-

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

宽度*数字-

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

颜色字符串数组
或 函数		blueberryTwilightPalette

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

数据集对象数组-

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

禁用坐标轴监听器布尔值false

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

高亮项{ dataIndex?: 数字, seriesId?: 数字
| 字符串 }		-

当前高亮的项。将高亮变成受控 prop。

边距{ bottom?: 数字, left?: 数字, right?: 数字, top?: 数字 }对象 取决于图表类型。

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

高亮更改时回调函数-

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

签名:function(highlightedItem: HighlightItemData | null) => void
  • highlightedItem 新高亮的项。
插件对象数组-

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

跳过动画布尔值-

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

xAxisArray<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| 数字
| 字符串> }
| { color: Array<string>
| 函数, max?: Date
| 数字, min?: Date
| 数字, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| 数字>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| 函数, fill?: string, hideTooltip?: bool, id?: 数字
| 字符串, label?: string, labelFontSize?: 数字, labelStyle?: object, max?: Date
| 数字, min?: Date
| 数字, 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>
或 函数
| object, tickFontSize?: 数字, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: 数字, tickMinStep?: 数字, tickNumber?: 数字, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: 数字, valueFormatter?: func }>		-

x 轴的配置。如果未提供，则使用默认坐标轴配置。一个 AxisConfig 对象数组。

yAxisArray<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| 数字
| 字符串> }
| { color: Array<string>
| 函数, max?: Date
| 数字, min?: Date
| 数字, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| 数字>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice'
| 'strict'
| 函数, fill?: string, hideTooltip?: bool, id?: 数字
| 字符串, label?: string, labelFontSize?: 数字, labelStyle?: object, max?: Date
| 数字, min?: Date
| 数字, 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>
或 函数
| object, tickFontSize?: 数字, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: 数字, tickMinStep?: 数字, tickNumber?: 数字, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: 数字, valueFormatter?: func }>		-

y 轴的配置。如果未提供，则使用默认坐标轴配置。一个 AxisConfig 对象数组。

zAxisArray<{ colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| 数字
| 字符串> }
| { color: Array<string>
| 函数, max?: Date
| 数字, min?: Date
| 数字, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| 数字>, type: 'piecewise' }, data?: array, dataKey?: string, id?: string, max?: 数字, min?: 数字 }>		-

z 轴的配置。

ref 被转发到根元素。

源代码

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