圖表 - 折線圖

折線圖可以表達關於資料的特性，例如層次結構、醒目提示和比較。

基礎知識

資料格式

為了繪製折線，一個 series 必須具有一個 data 屬性，其中包含數字陣列。這個 data 陣列對應到 y 值。

預設情況下，這些 y 值將與從 0 開始的整數關聯 (0, 1, 2, 3, ...)。若要修改 x 值，您應該提供具有 data 屬性的 xAxis。

<LineChart
  xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
  series={[
    {
      data: [2, 5.5, 2, 8.5, 1.5, 5],
    },
  ]}
  width={500}
  height={300}
/>

<LineChart
  xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
  series={[
    {
      data: [2, 5.5, 2, 8.5, 1.5, 5],
    },
  ]}
  width={500}
  height={300}
/>

按下 Enter 開始編輯

使用資料集

如果您的資料儲存在物件陣列中，您可以使用 dataset 輔助屬性。它接受物件陣列，例如 dataset={[{x: 1, y: 32}, {x: 2, y: 41}, ...]}。

當定義 series 和軸時，您可以重複使用此資料，這要歸功於 dataKey 屬性。

例如 xAxis={[{ dataKey: 'x'}]} 或 series={[{ dataKey: 'y'}]}。

這是世界電力生產按來源演進的圖表。

區域

您可以透過將 series 的 area 屬性設定為 true 來填滿折線的區域。

<LineChart
  xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
  series={[
    {
      data: [2, 5.5, 2, 8.5, 1.5, 5],
      area: true,
    },
  ]}
  width={500}
  height={300}
/>

<LineChart
  xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
  series={[
    {
      data: [2, 5.5, 2, 8.5, 1.5, 5],
      area: true,
    },
  ]}
  width={500}
  height={300}
/>

按下 Enter 開始編輯

堆疊

每個折線 series 都可以取得一個 stack 屬性，該屬性預期為字串值。具有相同 stack 的 series 將彼此堆疊。

堆疊策略

您可以使用 stackOffset 和 stackOrder 屬性來定義 series 的堆疊方式。

預設情況下，它們會按照您定義的順序堆疊，正值堆疊在 0 以上，負值堆疊在 0 以下。

如需更多資訊，請參閱堆疊文件。

部分資料

跳過遺失點

折線 series 可以擁有的資料點比軸少。您可以透過提供 null 值來處理具有部分資料或從不同點開始的資料的折線。

預設情況下，如果工具提示沒有值，則不會顯示 series。若要覆寫此行為，請使用 valueFormatter 在值為 null 或 undefined 時傳回字串。

當 series 資料長度小於軸的長度時，溢位值為 undefined 而不是 null。

以下程式碼繪製 x 在 2 到 4 之間的折線。

對於 x<2，值設定為 null，然後不顯示。
對於 x>4，值設定為 undefined，然後不顯示。

<LineChart
  series={[{ data: [null, null, 10, 11, 12] }]}
  xAxis={[{ data: [0, 1, 2, 3, 4, 5, 6] }]}
/>

連接遺失點

折線 series 接受一個 connectNulls 屬性，它將繼續跨具有 null 值的點進行插值。此屬性可以連結兩組點，它們之間有 null 資料。但是，它無法在外推第一個非 null 資料點之前或最後一個資料點之後的曲線。

connectNulls

點擊事件

折線圖提供多個點擊處理常式

onAreaClick 用於點擊特定區域。
onLineClick 用於點擊特定折線。
onMarkClick 用於點擊特定標記。
onAxisClick 用於點擊圖表中的任何位置

它們都提供以下簽章。

const clickHandler = (
  event, // The mouse event.
  params, // An object that identifies the clicked elements.
) => {};

點擊圖表

// Data from item click
// The data will appear here

// Data from axis click
// The data will appear here

組合

如果您使用組合，您可以如下取得這些點擊事件。請注意，如果您混合使用長條圖和折線圖，onAxisClick 將同時處理這兩者。

import ChartsOnAxisClickHandler from '@mui/x-charts/ChartsOnAxisClickHandler';
// ...

<ChartContainer>
  {/* ... */}
  <ChartsOnAxisClickHandler onAxisClick={onAxisClick} />
  <LinePlot onItemClick={onLineClick} />
  <AreaPlot onItemClick={onAreaClick} />
</ChartContainer>;

樣式設定

網格

您可以使用 grid 屬性在圖表的背景中新增網格。

如需更多資訊，請參閱座標軸—網格文件。

<LineChart
  dataset={dataset}
  xAxis={[{ dataKey: 'x' }]}
  series={[{ dataKey: 'y' }]}
  height={300}
  margin={{ left: 30, right: 30, top: 30, bottom: 30 }}
  grid={{ vertical: true, horizontal: true }}
/>

<LineChart
  dataset={dataset}
  xAxis={[{ dataKey: 'x' }]}
  series={[{ dataKey: 'y' }]}
  height={300}
  margin={{ left: 30, right: 30, top: 30, bottom: 30 }}
  grid={{ vertical: true, horizontal: true }}
/>

按下 Enter 開始編輯

顏色比例

與其他圖表一樣，您可以直接或使用調色盤修改series 顏色。

您也可以透過使用軸 colorMap 來修改顏色，該 colorMap 將值對應到顏色。折線圖依優先順序使用

y 軸顏色
x 軸顏色
series 顏色

在樣式設定文件中了解更多關於 colorMap 屬性的資訊。

x 軸 colorMap

y 軸 colorMap

<ScatterChart
  /* ... */
  xAxis={[{}]}
  yAxis={[{
    colorMap: {
      type: 'piecewise',
      thresholds: [0, 10],
      colors: ['red', 'green', 'blue'],
    }
  }]}
/>

插值

資料點之間的插值可以透過 curve 屬性自訂。此屬性預期為以下字串值之一，對應於插值方法：'catmullRom'、'linear'、'monotoneX'、'monotoneY'、'natural'、'step'、'stepBefore'、'stepAfter'。

此 series 屬性新增了控制 series 插值的選項。不同的 series 甚至可以有不同的插值。

插值方法

<LineChart
  series={[
    { curve: "linear", data: [0, 5, 2, 6, 3, 9.3] },
    { curve: "linear", data: [6, 3, 7, 9.5, 4, 2] },
  ]}
  {/* ... */}
/>

基準線

區域圖在 Y 軸 0 上繪製 baseline。這作為一個基準值很有用，但自訂視覺化可能需要不同的基準線。

若要取得填滿折線上方或下方空間的區域，請將 baseline 設定為 "min" 或 "max"。也可以提供 number 值以將基準線固定在所需位置。

<LineChart
  xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
  series={[
    {
      data: [2, -5.5, 2, -7.5, 1.5, 6],
      area: true,
      baseline: 'min',
    },
  ]}
  width={500}
  height={300}
/>

<LineChart
  xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
  series={[
    {
      data: [2, -5.5, 2, -7.5, 1.5, 6],
      area: true,
      baseline: 'min',
    },
  ]}
  width={500}
  height={300}
/>

按下 Enter 開始編輯

最佳化

若要顯示標記元素，請使用 showMark series 屬性。它接受布林值或回呼。下一個範例示範如何使用它來僅顯示每兩個資料點一個標記。

當值被醒目提示時，會為該給定值呈現標記。如果圖表已經有一些標記（由於 showMark=true），則醒目提示的標記將位於其他標記之上。

可以使用 disableHighlight series 屬性或在折線圖的根目錄中使用 disableLineItemHighlight 屬性來移除此行為。

在此範例中，您為每個索引為偶數的值都有一個標記。醒目提示的資料無論索引是偶數還是奇數都有標記。

<LineChart
  xAxis={[{ data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }]}
  series={[
    {
      data: [2, 3, 5.5, 8.5, 1.5, 5, 1, 4, 3, 8],
      showMark: ({ index }) => index % 2 === 0,
    },
  ]}
  width={500}
  height={300}
/>

<LineChart
  xAxis={[{ data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }]}
  series={[
    {
      data: [2, 3, 5.5, 8.5, 1.5, 5, 1, 4, 3, 8],
      showMark: ({ index }) => index % 2 === 0,
    },
  ]}
  width={500}
  height={300}
/>

按下 Enter 開始編輯

CSS

折線圖由三個名為 LineElement、AreaElement 和 MarkElement 的元素組成。可以使用 CSS 類別名稱 .MuiLineElement-root、.MuiAreaElement-root 或 .MuiMarkElement-root 選取每個元素。

如果您想要選取給定 series 的元素，您可以使用類別 .MuiLineElement-series-<seriesId>，其中 <seriesId> 是您要自訂的 series 的 id。

在下一個範例中，每個折線樣式都使用虛線自訂，並且移除了標記。德國 GDP 的區域也獲得了自訂漸層顏色。myGradient 的定義作為圖表元件的子元素傳遞。

sx={{
  '& .MuiLineElement-root': {
    strokeDasharray: '10 5',
    strokeWidth: 4,
  },
  '& .MuiAreaElement-series-Germany': {
    fill: "url('#myGradient')",
  },
}}

動畫

若要跳過在建立和更新圖表時的動畫，您可以使用 skipAnimation 屬性。當設定為 true 時，它會跳過由 @react-spring/web 驅動的動畫。

圖表容器已經使用來自 @react-spring/web 的 useReducedMotion 來跳過動畫根據使用者偏好設定。

// For a single component chart
<LineChart skipAnimation />

// For a composed chart
<ResponsiveChartContainer>
  <LinePlot skipAnimation />
  <AreaPlot skipAnimation />
</ResponsiveChartContainer>

skipAnimation

API

請參閱以下文件，以取得此處提及的元件所有可用屬性和類別的完整參考。