跳到内容

SparkLineChartAPI

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

演示

导入

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

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

Props

原生组件的 Props 也可用。

名称类型默认值描述
data*Array<number>-

要绘制的数据。

areaboolfalse

设置为 true 以填充迷你图区域。如果 plotType='bar'，则无效。

colorsArray<string>
| func		blueberryTwilightPalette

用于着色多个系列的调色板。

datasetArray<object>-

对象数组，可用于使用其 dataKey 属性填充系列和坐标轴数据。

disableAxisListenerboolfalse

如果为 true，图表将不会监听鼠标移动事件。这可能会破坏交互功能，但会提高性能。

heightnumber-

图表的 px 高度。如果未定义，则采用父元素的高度。

highlightedItem{ dataIndex?: number, seriesId?: number
| string }		-

当前高亮的项目。将高亮变为受控 prop。

margin{ bottom?: number, left?: number, right?: number, top?: number }{ top: 5, bottom: 5, left: 5, right: 5, }

SVG 和绘图区域之间的边距。它用于为额外信息（例如 x 轴和 y 轴或图例）留出一些空间。接受具有可选属性的对象：top、bottom、left 和 right。

onHighlightChangefunc-

当高亮的项目更改时触发的回调。

签名：function(highlightedItem: HighlightItemData | null) => void
  • highlightedItem 新高亮的项目。
plotType'bar'
| 'line'		'line'

使用的绘图类型。

resolveSizeBeforeRenderboolfalse

图表将尝试等待父容器解析其大小，然后再首次渲染。
在某些情况下，当图表在首次渲染后显得增长时（例如在网格内使用时），这可能很有用。

showHighlightboolfalse

设置为 true 以高亮显示值。对于折线图，它显示一个点。对于柱状图，它显示一个高亮带。

showTooltipboolfalse

设置为 true 以在迷你图中启用工具提示。

skipAnimationbool-

如果为 true，则跳过动画。如果未设置或为 false，则动画会遵循用户的 prefers-reduced-motion 设置。

slotPropsobject{}

用于每个组件插槽的 props。

slotsobject{}

可覆盖的组件插槽。

有关更多详细信息，请参见下面的 Slots API。

valueFormatterfunc(value: number | null) => (value === null ? '' : value.toString())

工具提示使用的格式化程序。

签名：function(value: number) => string
  • value 要格式化的值。

返回： 格式化的值。

widthnumber-

图表的 px 宽度。如果未定义，则采用父元素的宽度。

xAxis{ 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 }		-

xAxis 配置。请注意，它是一个单一的 AxisConfig 对象，而不是配置数组。

yAxis{ 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 }		-

yAxis 配置。请注意，它是一个单一的 AxisConfig 对象，而不是配置数组。

ref 被转发到根元素。

Slots

插槽名称类名默认组件描述
areaAnimatedArea渲染区域的组件。
axisContentDefaultChartsAxisTooltipContent用于显示由坐标轴事件触发的工具提示内容的自定义组件。
barBarElementPath渲染柱状图的组件。
itemContentDefaultChartsItemTooltipContent用于显示由项目事件触发的工具提示内容的自定义组件。
lineLineElementPath渲染折线的组件。
lineHighlight
mark
popperChartsTooltipRoot用于工具提示 popper 的自定义组件。

源代码

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