LineChartAPI

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

演示

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

导入

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

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

属性

原生组件的属性也可用。

名称	类型	默认值	描述
series*	Array<object>	-	要在折线图中显示的系列。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	用于着色多个系列的调色板。
dataset	Array<object>	-	对象数组，可用于使用其 `dataKey` 属性填充系列和坐标轴数据。
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 }	-	当前高亮显示的项目。将高亮显示变为受控属性。
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	-	当单击标记元素时触发的回调。
resolveSizeBeforeRender	bool	false	图表将尝试等待父容器解析其大小，然后再首次渲染。这在某些情况下很有用，例如在网格内部使用时，图表在首次渲染后似乎会增长。
rightAxis	object \| string	null	指示图表右侧要显示的坐标轴。可以是字符串（坐标轴的 id）或 `ChartsYAxisProps` 对象。
skipAnimation	bool	false	如果为 `true`，则跳过动画。
slotProps	object	{}	用于每个组件插槽的 props。
slots	object	{}	可覆盖的组件插槽。有关更多详细信息，请参见下面的插槽 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 }>	-	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 }>	-	y 轴的配置。如果未提供，则使用默认坐标轴配置。AxisConfig 对象的数组。

ref 被转发到根元素。

主题默认属性

您可以使用 MuiLineChart 通过主题更改此组件的默认属性。

插槽

插槽名称	默认组件	描述
area	`AnimatedArea`	渲染区域的组件。
axisContent	`DefaultChartsAxisTooltipContent`	用于在由坐标轴事件触发时显示工具提示内容的自定义组件。
axisLabel	`ChartsText`	坐标轴标签的自定义组件。
axisLine	`'line'`	坐标轴主线的自定义组件。
axisTick	`'line'`	坐标轴刻度的自定义组件。
axisTickLabel	`ChartsText`	刻度标签的自定义组件。
itemContent	`DefaultChartsItemTooltipContent`	用于在由项目事件触发时显示工具提示内容的自定义组件。
legend	`DefaultChartsLegend`	图例的自定义渲染。
line	`LineElementPath`	渲染折线的组件。
lineHighlight
loadingOverlay	`ChartsLoadingOverlay`	当图表处于加载状态时渲染的覆盖组件。
mark
noDataOverlay	`ChartsNoDataOverlay`	当图表没有要显示的数据时渲染的覆盖组件。
popper	`ChartsTooltipRoot`	工具提示 popper 的自定义组件。

源代码

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