ChartsLegendAPI
React ChartsLegend 组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。
演示
导入
import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
// or
import { ChartsLegend } from '@mui/x-charts';
// or
import { ChartsLegend } from '@mui/x-charts-pro';通过阅读这篇关于最小化 bundle size 的指南，了解它们之间的区别。
| 名称 | 类型 | 默认 | 描述 |
|---|---|---|---|
| classes | object | - | 覆盖或扩展应用于组件的样式。 有关更多详细信息，请参阅下面的CSS 类 API。 |
| direction | 'column' | 'row' | - | 图例布局的方向。默认值取决于图表。 |
| itemGap | number | 10 | 两个图例项目之间的间距（以像素为单位）。 |
| itemMarkHeight | number | 20 | 项目标记的高度（以像素为单位）。 |
| itemMarkWidth | number | 20 | 项目标记的宽度（以像素为单位）。 |
| labelStyle | object | theme.typography.subtitle1 | 应用于图例标签的样式。 |
| markGap | number | 5 | 标记和标签之间的间距（以像素为单位）。 |
| onItemClick | func | - | 单击图例项目时触发的回调。 签名： function(event: React.MouseEvent
|
| padding | number | { bottom?: number, left?: number, right?: number, top?: number } | 10 | 图例内边距（以像素为单位）。可以是单个数字，也可以是具有 top、left、bottom、right 属性的对象。 |
| position | { horizontal: 'left' | 'middle' | 'right', vertical: 'bottom' | 'middle' | 'top' } | - | 图例的位置。 |
| slotProps | object | {} | 用于每个组件插槽的 props。 |
| slots | object | {} | 可覆盖的组件插槽。 有关更多详细信息，请参阅下面的插槽 API。 |
该组件不能持有 ref。
| 插槽名称 | 类名 | 默认组件 | 描述 |
|---|---|---|---|
| legend | DefaultChartsLegend | 图例的自定义渲染。 |
这些类名对于使用 CSS 设置样式很有用。当触发特定状态时，它们将应用于组件的插槽。
| 类名 | 规则名称 | 描述 |
|---|---|---|
| .MuiChartsLegend-column | column | 应用于具有列布局的图例的样式。 |
| .MuiChartsLegend-itemBackground | itemBackground | 应用于项目背景的样式。 |
| .MuiChartsLegend-label | label | 应用于系列标签的样式。 |
| .MuiChartsLegend-mark | mark | 应用于系列标记元素的样式。 |
| .MuiChartsLegend-root | root | 应用于根元素的样式。 |
| .MuiChartsLegend-row | row | 应用于具有行布局的图例的样式。 |
| .MuiChartsLegend-series | series | 应用于系列元素的样式。 |
您可以使用以下自定义选项之一来覆盖组件的样式
- 使用全局类名。
- 使用规则名称作为自定义主题中组件的
styleOverrides属性的一部分。
源代码
如果您在此页面中找不到所需的信息，请考虑查看组件的实现以获取更多详细信息。