LineChartProAPI

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

演示

有关此 React 组件用法的示例和详细信息，请访问组件演示页面

导入

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

通过阅读此关于最小化捆绑包大小的指南，了解它们之间的区别。

Props

名称	类型	默认值	描述
series*	Array<object>	-	要在折线图中显示的 series。 LineSeriesType 对象的数组。
axisHighlight	{ x?: 'band' \| 'line' \| 'none', y?: 'band' \| 'line' \| 'none' }	{ x: 'line' }	坐标轴高亮的配置。有关更多详细信息，请参阅高亮文档。
bottomAxis	object \| string	xAxisIds[0] 第一个提供的坐标轴的 id	指示要在图表底部显示的坐标轴。可以是字符串（坐标轴的 id）或 `ChartsXAxisProps` 对象。
colors	Array<string> \| func	blueberryTwilightPalette	用于为多个 series 着色的调色板。
dataset	Array<object>	-	对象数组，可用于使用其 `dataKey` 属性填充 series 和坐标轴数据。
disableAxisListener	bool	false	如果为 `true`，则图表将不监听鼠标移动事件。这可能会破坏交互功能，但会提高性能。
disableLineItemHighlight	bool	-	如果为 `true`，则渲染线条高亮项目。
experimentalMarkRendering	bool	-	如果为 `true`，标记将渲染 `<circle />` 而不是 `<path />`，并删除主题覆盖以加快渲染速度。
grid	{ horizontal?: bool, vertical?: bool }	-	在背景中显示笛卡尔网格的选项。
height	number	-	图表的 px 高度。如果未定义，则采用父元素的高度。
highlightedItem	{ dataIndex?: number, seriesId?: number \| string }	-	当前高亮的项目。将高亮变成受控 prop。
leftAxis	object \| string	yAxisIds[0] 第一个提供的坐标轴的 id	指示要在图表左侧显示的坐标轴。可以是字符串（坐标轴的 id）或 `ChartsYAxisProps` 对象。
loading	bool	false	如果为 `true`，则显示加载覆盖层。
margin	{ bottom?: number, left?: number, right?: number, top?: number }	object 取决于图表类型。	SVG 和绘图区域之间的边距。它用于为额外信息（例如 x 轴和 y 轴或图例）留出一些空间。接受具有可选属性的对象：`top`、`bottom`、`left` 和 `right`。
onAreaClick	func	-	当点击区域元素时触发的回调。
onAxisClick	func	-	为 onClick 事件调用的函数。第二个参数包含有关当前鼠标位置的所有折线/柱状图元素的信息。签名：`function(event: MouseEvent, data: null \| AxisData) => void` `event` 在 `<svg/>` 元素上记录的鼠标事件。 `data` 关于点击的坐标轴以及与之关联的项目的数据。
onHighlightChange	func	-	当高亮的项目更改时触发的回调。签名：`function(highlightedItem: HighlightItemData \| null) => void` `highlightedItem` 新高亮的项目。
onLineClick	func	-	当点击折线元素时触发的回调。
onMarkClick	func	-	当点击标记元素时触发的回调。
onZoomChange	func	-	当缩放已更改时触发的回调。签名：`function(zoomData: Array) => void` `zoomData` 更新后的缩放数据。
resolveSizeBeforeRender	bool	false	图表将尝试等待父容器解析其大小，然后再首次渲染。这在某些情况下很有用，在这些情况下，图表在首次渲染后似乎会增长，例如在网格内使用时。
rightAxis	object \| string	null	指示要在图表右侧显示的坐标轴。可以是字符串（坐标轴的 id）或 `ChartsYAxisProps` 对象。
skipAnimation	bool	false	如果为 `true`，则跳过动画。
slotProps	object	{}	用于每个组件插槽的 props。
slots	object	{}	可覆盖的组件插槽。有关更多详细信息，请参阅下面的Slots API。
tooltip	{ axisContent?: elementType, classes?: object, itemContent?: elementType, slotProps?: object, slots?: object, trigger?: 'axis' \| 'item' \| 'none' }	{ trigger: 'item' }	工具提示的配置。有关更多详细信息，请参阅工具提示文档。
topAxis	object \| string	null	指示要在图表顶部显示的坐标轴。可以是字符串（坐标轴的 id）或 `ChartsXAxisProps` 对象。
width	number	-	图表的 px 宽度。如果未定义，则采用父元素的宽度。
xAxis	Array<{ 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 对象的数组。
yAxis	Array<{ 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 对象的数组。
zoom	Array<{ axisId: number \| string, end: number, start: number }>	-	与每个轴相关的缩放数据列表。

该组件无法保存 ref。

源代码

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