PiecewiseColorLegendAPI

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

演示

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

图表 - 图例

导入

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

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

Props

名称	类型	默认值	描述
direction*	'column' \| 'row'	-	图例布局的方向。默认值取决于图表。
position*	{ horizontal: 'left' \| 'middle' \| 'right', vertical: 'bottom' \| 'middle' \| 'top' }	-	图例的位置。
axisDirection	'x' \| 'y' \| 'z'	'z'	包含要表示的颜色配置的轴方向。
axisId	number \| string	第一个轴项目。	包含要表示的颜色配置的轴项目的 ID。
classes	object	-	覆盖或扩展应用于组件的样式。有关更多详细信息，请参阅下面的 CSS 类 API。
hideFirst	bool	false	隐藏图例的第一个项目，对应于 [-infinity, min] 片段。
hideLast	bool	false	隐藏图例的最后一个项目，对应于 [max, +infinity] 片段。
itemGap	number	10	两个图例项目之间的间距（以 px 为单位）。
itemMarkHeight	number	20	项目标记的高度（以 px 为单位）。
itemMarkWidth	number	20	项目标记的宽度（以 px 为单位）。
labelFormatter	func	-	格式化图例标签。签名：`function(params: PiecewiseLabelFormatterParams) => string \| null` `params` 要格式化的片段的边界。返回：显示的标签，或 `null` 以跳过该项目。
labelStyle	object	theme.typography.subtitle1	应用于图例标签的样式。
markGap	number	5	标记和标签之间的间距（以 px 为单位）。
onItemClick	func	-	单击图例项目时触发的回调。签名：`function(event: React.MouseEvent, legendItem: PiecewiseColorLegendItemContext, index: number) => void` `event` 点击事件。 `legendItem` 图例项目数据。 `index` 点击的图例项目的索引。
padding	number \| { bottom?: number, left?: number, right?: number, top?: number }	10	图例内边距（以 px 为单位）。可以是单个数字，也可以是具有 top、left、bottom、right 属性的对象。

组件无法保持 ref。

CSS 类

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

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

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

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

源代码

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