圖表 - 跑馬火花圖

跑馬火花圖可以提供資料趨勢的概觀。

基礎知識

跑馬火花圖是一種小型圖表，繪製時不帶座標軸或坐標，以簡化的方式呈現變化的總體形狀。<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 />