图表 - 迷你图

迷你图表可以提供数据趋势的概览。

基础知识

迷你图是一种小型图表，绘制时没有轴或坐标，以简化的方式呈现变化的总体形状。<SparkLineChart /> 仅需要 data 属性，它是一个数字数组。您也可以使用 plotType="bar" 从折线图切换到条形图。

<Box sx={{ flexGrow: 1 }}>
  <SparkLineChart data={[1, 4, 2, 5, 7, 2, 4, 6]} height={100} />
</Box>
<Box sx={{ flexGrow: 1 }}>
  <SparkLineChart
    plotType="bar"
    data={[1, 4, 2, 5, 7, 2, 4, 6]}
    height={100}
  />
</Box>

<Box sx={{ flexGrow: 1 }}>
  <SparkLineChart data={[1, 4, 2, 5, 7, 2, 4, 6]} height={100} />
</Box>
<Box sx={{ flexGrow: 1 }}>
  <SparkLineChart
    plotType="bar"
    data={[1, 4, 2, 5, 7, 2, 4, 6]}
    height={100}
  />
</Box>

按 Enter 开始编辑

折线自定义

您可以使用 area 属性填充迷你图曲线下方的区域。要修改曲线插值，请使用 curve 属性。请阅读折线图页面中关于曲线的完整文档。

<Box sx={{ flexGrow: 1 }}>
  <SparkLineChart data={[3, -10, -2, 5, 7, -2, 4, 6]} height={100} area />
</Box>
<Box sx={{ flexGrow: 1 }}>
  <SparkLineChart
    data={[3, -10, -2, 5, 7, -2, 4, 6]}
    height={100}
    curve="natural"
    area
  />
</Box>

<Box sx={{ flexGrow: 1 }}>
  <SparkLineChart data={[3, -10, -2, 5, 7, -2, 4, 6]} height={100} area />
</Box>
<Box sx={{ flexGrow: 1 }}>
  <SparkLineChart
    data={[3, -10, -2, 5, 7, -2, 4, 6]}
    height={100}
    curve="natural"
    area
  />
</Box>

按 Enter 开始编辑

交互

与折线图和条形图相比，迷你图有一些额外的属性来简化交互配置。您可以使用 showTooltip 和 showHighlight 在迷你图中显示默认工具提示和高亮。

这些是辅助工具。如果您需要更高级的自定义，您可以为 tooltip 和 highlight 提供自定义属性，如工具提示页面中所述。

showHighlightshowTooltip

坐标轴管理

X 轴数据

默认情况下，迷你图将 xAxis 值分配为从 0 开始的升序整数序列（0、1、2...）。在这种情况下，这些值在工具提示中是隐藏的。如果您的数据分布不均匀，或者您需要标记它们，您可以覆盖此行为。

为此，请使用 xAxis 属性。请注意，迷你图不管理多个轴，因此 xAxis 属性采用轴配置对象。而大多数其他图表都期望轴配置对象数组。

<SparkLineChart data={[1, 4, 2, 5, 7, 2, 4, 6]} xAxis={{ scaleType, data }} />

Y 轴范围

您可以通过为 yAxis 配置提供 min/max 值来固定迷你图的 y 轴范围。

以下演示显示了两个迷你图，一个具有小值，另一个具有大值。第一行具有默认的 y 轴值，而第二行设置了从 0 到 100 的固定范围。

没有固定 y 轴范围

y 轴范围固定为 [0, 100]

您可以通过在 yAxis 配置中使用 domainLimit 选项，相对于其数据调整迷你图的 y 轴范围。有关更多信息，请参阅轴文档页面。

下面的演示显示了设置 y 轴范围的不同方法。它们始终显示相同的数据，范围从 -15 到 92，但具有不同的 domainLimit 设置。

domain limit

y 轴范围-100, 100

API

请参阅下面的文档，获取此处提到的组件的所有可用属性和类的完整参考。

<SparkLineChart />