DefaultChartsLegendAPI

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

演示

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

图表 - 图例

导入

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

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

Props

名称	类型	默认	描述
direction*	'column' \| 'row'	-	图例布局的方向。默认值取决于图表。
position*	{ horizontal: 'left' \| 'middle' \| 'right', vertical: 'bottom' \| 'middle' \| 'top' }	-	图例的位置。
classes	object	-	覆盖或扩展应用于组件的样式。有关更多详细信息，请参阅下面的CSS 类 API。
hidden	bool	false	设置为 true 以隐藏图例。
itemGap	number	10	两个图例项目之间的间距（以像素为单位）。
itemMarkHeight	number	20	项目标记的高度（以像素为单位）。
itemMarkWidth	number	20	项目标记的宽度（以像素为单位）。
labelStyle	object	theme.typography.subtitle1	应用于图例标签的样式。
markGap	number	5	标记和标签之间的间距（以像素为单位）。
onItemClick	func	-	当图例项目被点击时触发的回调。签名：`function(event: React.MouseEvent, legendItem: SeriesLegendItemContext, index: number) => void` `event` 点击事件。 `legendItem` 图例项目数据。 `index` 点击的图例项目的索引。
padding	number \| { bottom?: number, left?: number, right?: number, top?: number }	10	图例内边距（以像素为单位）。可以是单个数字，也可以是具有 top、left、bottom、right 属性的对象。

该组件不能持有 ref。

CSS 类

这些类名对于使用 CSS 设置样式很有用。当触发特定状态时，它们会应用于组件的插槽。

类名	规则名	描述
.MuiDefaultChartsLegend-column	column	应用于具有列布局的图例的样式。
.MuiDefaultChartsLegend-itemBackground	itemBackground	应用于项目背景的样式。
.MuiDefaultChartsLegend-label	label	应用于系列标签的样式。
.MuiDefaultChartsLegend-mark	mark	应用于系列标记元素的样式。
.MuiDefaultChartsLegend-root	root	应用于根元素的样式。
.MuiDefaultChartsLegend-row	row	应用于具有行布局的图例的样式。
.MuiDefaultChartsLegend-series	series	应用于系列元素的样式。

您可以使用以下自定义选项之一覆盖组件的样式

使用全局类名。
在自定义主题中使用规则名称作为组件的styleOverrides 属性的一部分。

源代码

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