热力图API
React 热力图组件的 API 参考文档。了解有关此导出模块的 props、CSS 和其他 API 的信息。
演示
导入
import { Heatmap } from '@mui/x-charts-pro/Heatmap';
// or
import { Heatmap } from '@mui/x-charts-pro';通过阅读本关于最小化捆绑包大小的指南，了解它们之间的区别。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| series* | Array<object> | - | 要在柱状图中显示的系列。HeatmapSeriesType 对象的数组。 |
| xAxis* | Array<{ barGapRatio?: number, categoryGapRatio?: number, 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', 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<{ barGapRatio?: number, categoryGapRatio?: number, 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', 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 对象的数组。 |
| bottomAxis | object | string | xAxisIds[0] 第一个提供的轴的 id | 指示要显示图表底部的轴。可以是字符串（轴的 id）或 |
| colors | Array<string> | func | blueberryTwilightPalette | 用于为多个系列着色的调色板。 |
| dataset | Array<object> | - | 一个对象数组，可用于使用其 |
| disableAxisListener | bool | false | 如果为 |
| height | number | - | 图表的 px 高度。如果未定义，则采用父元素的高度。 |
| highlightedItem | { dataIndex?: number, seriesId?: number | string } | - | 当前高亮显示的项目。将高亮显示变为受控 prop。 |
| leftAxis | object | string | yAxisIds[0] 第一个提供的轴的 id | 指示要显示图表左侧的轴。可以是字符串（轴的 id）或 |
| loading | bool | false | 如果为 |
| margin | { bottom?: number, left?: number, right?: number, top?: number } | object 取决于图表类型。 | SVG 和绘图区域之间的边距。它用于为额外信息（例如 x 轴和 y 轴或图例）留出一些空间。接受具有可选属性的对象： |
| onAxisClick | func | - | 单击事件调用的函数。第二个参数包含有关当前鼠标位置的所有折线/柱状图元素的信息。 签名: function(event: MouseEvent, data: null | AxisData) => void
|
| onHighlightChange | func | - | 高亮显示项目更改时触发的回调。 签名: function(highlightedItem: HighlightItemData | null) => void
|
| resolveSizeBeforeRender | bool | false | 图表将尝试等待父容器解析其大小，然后再首次渲染。 |
| rightAxis | object | string | null | 指示要显示图表右侧的轴。可以是字符串（轴的 id）或 |
| slotProps | object | {} | 用于每个组件插槽的 props。 |
| slots | object | {} | 可覆盖的组件插槽。 有关更多详细信息，请参见下面的 Slots API。 |
| tooltip | { axisContent?: elementType, classes?: object, itemContent?: elementType, slotProps?: object, slots?: object, trigger?: 'axis' | 'item' | 'none' } | - | 工具提示的配置。 有关更多详细信息，请参见 工具提示文档。 |
| topAxis | object | string | null | 指示要显示图表顶部的轴。可以是字符串（轴的 id）或 |
| width | number | - | 图表的 px 宽度。如果未定义，则采用父元素的宽度。 |
| zAxis | Array<{ 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, id?: string, max?: number, min?: number }> | - | z 轴的配置。 |
该组件无法容纳 ref。
这些类名对于使用 CSS 进行样式设置很有用。当触发特定状态时，它们将应用于组件的插槽。
| 类名 | 规则名称 | 描述 |
|---|---|---|
| .MuiHeatmap-cell | cell | 应用于热力图单元格的样式。 |
| .MuiHeatmap-faded | faded | 应用于淡化单元格元素的样式。 |
| .MuiHeatmap-highlighted | highlighted | 应用于高亮显示单元格元素的样式。 |
您可以使用以下自定义选项之一来覆盖组件的样式
- 使用全局类名。
- 使用规则名称作为自定义主题中组件的
styleOverrides属性的一部分。
源代码
如果您在本页中没有找到所需信息，请考虑查看组件的实现以获取更多详细信息。