圖表 - 座標軸

座標軸提供與元素位置相關聯的值。

座標軸用於以下圖表：<LineChart />、<BarChart />、<ScatterChart />。

定義座標軸

如同您的資料，座標軸定義在圖表渲染中扮演核心角色。它負責資料與元素位置之間的映射。

您可以使用 xAxis 和 yAxis 屬性來定義自訂座標軸。這些屬性預期為物件陣列。

以下示範使用兩條具有相同資料的線條。但其中一條使用線性座標軸，另一條使用對數座標軸。每個座標軸定義都由其 id 屬性識別。然後，每個系列都使用 xAxisId 和 yAxisId 屬性指定它們使用的座標軸。

<LineChart
  xAxis={[{ data: sample }]}
  yAxis={[
    { id: 'linearAxis', scaleType: 'linear' },
    { id: 'logAxis', scaleType: 'log' },
  ]}
  series={[
    { yAxisId: 'linearAxis', data: sample, label: 'linear' },
    { yAxisId: 'logAxis', data: sample, label: 'log' },
  ]}
  leftAxis="linearAxis"
  rightAxis="logAxis"
  height={400}
/>

<LineChart
  xAxis={[{ data: sample }]}
  yAxis={[
    { id: 'linearAxis', scaleType: 'linear' },
    { id: 'logAxis', scaleType: 'log' },
  ]}
  series={[
    { yAxisId: 'linearAxis', data: sample, label: 'linear' },
    { yAxisId: 'logAxis', data: sample, label: 'log' },
  ]}
  leftAxis="linearAxis"
  rightAxis="logAxis"
  height={400}
/>

按下 Enter 開始編輯

座標軸類型

座標軸類型由其屬性 scaleType 指定，該屬性預期為以下值之一

'band'：將軸分割成相等的帶狀。主要用於長條圖。
'point'：將軸分割成間距相等的點。主要用於類別上的折線圖。
'linear'、'log'、'sqrt'：將數值映射到圖表的可用空間。'linear' 是預設行為。
'time'、'utc'：將 JavaScript Date() 物件映射到圖表的可用空間。

座標軸資料

座標軸定義物件也包含 data 屬性。該屬性預期為與 scaleType 一致的值陣列

對於 'linear'、'log' 或 'sqrt'，它應包含數值
對於 'time' 或 'utc'，它應包含 Date() 物件
對於 'band' 或 'point'，它可以包含 string 或數值

某些系列類型也需要特定的座標軸屬性

折線圖需要提供 xAxis 的 data
長條圖需要具有 scaleType='band' 和一些提供的 data 的 xAxis。

座標軸格式器

座標軸資料可以顯示在座標軸刻度和工具提示中。若要修改資料的顯示方式，請使用 valueFormatter 屬性。

valueFormatter 的第二個引數提供了一些用於進階用例的渲染上下文。

在下一個示範中，valueFormatter 用於縮短月份並僅為刻度引入換行空格。為了區分刻度和工具提示，它使用了 context.location。

<BarChart
  dataset={dataset}
  xAxis={[
    {
      scaleType: 'band',
      dataKey: 'month',
      valueFormatter: (month, context) =>
        context.location === 'tick'
          ? `${month.slice(0, 3)} \n2023`
          : `${month} 2023`,
    },
  ]}
  series={[{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }]}
  {...otherSetting}
/>

<BarChart
  dataset={dataset}
  xAxis={[
    {
      scaleType: 'band',
      dataKey: 'month',
      valueFormatter: (month, context) =>
        context.location === 'tick'
          ? `${month.slice(0, 3)} \n2023`
          : `${month} 2023`,
    },
  ]}
  series={[{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }]}
  {...otherSetting}
/>

按下 Enter 開始編輯

座標軸子網域

預設情況下，座標軸網域的計算方式是讓您的所有資料都可見。若要顯示特定值範圍，您可以為座標軸定義提供 min 和/或 max 屬性。

xAxis={[
  {
    min: 10,
    max: 50,
  },
]}

相對座標軸子網域

您可以使用 domainLimit 選項相對於其資料調整座標軸範圍。它可以採用 3 個不同的值

"nice" 將網域四捨五入為人類友善的值。這是預設行為。
"strict" 將網域設定為要顯示的最小值/最大值。
(minValue, maxValue) => { min, max } 接收計算出的極值作為參數，並應傳回座標軸網域。

下面的示範顯示了設定 y 軸範圍的不同方式。它們始終顯示相同的資料，範圍從 -15 到 92，但具有不同的 domainLimit 設定。

網域限制

座標軸方向

預設情況下，座標軸的方向是從左到右和從下到上。您可以使用屬性 reverse 變更此行為。

反轉 x 軸反轉左軸反轉右軸

網格

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

它接受具有 vertical 和 horizontal 屬性的物件。將這些屬性設定為 true 將顯示網格線。

如果您使用組合，您可以將這些屬性傳遞給 <ChartsGrid /> 組件。

<BarChart grid={{ vertical: true }}>

<ChartContainer>
  <ChartsGrid vertical >
</ChartContainer>

<BarChart
  dataset={dataset}
  xAxis={[{ scaleType: 'band', dataKey: 'month' }]}
  series={[{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }]}
  grid={{ horizontal: true }}
  sx={{
    [`& .${axisClasses.left} .${axisClasses.label}`]: {
      transform: 'translateX(-10px)',
    },
    [`& .${chartsGridClasses.line}`]: { strokeDasharray: '5 3', strokeWidth: 2 },
  }}
  {...chartSetting}
/>

<BarChart
  dataset={dataset}
  xAxis={[{ scaleType: 'band', dataKey: 'month' }]}
  series={[{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }]}
  grid={{ horizontal: true }}
  sx={{
    [`& .${axisClasses.left} .${axisClasses.label}`]: {
      transform: 'translateX(-10px)',
    },
    [`& .${chartsGridClasses.line}`]: { strokeDasharray: '5 3', strokeWidth: 2 },
  }}
  {...chartSetting}
/>

按下 Enter 開始編輯

刻度位置

自動刻度位置

您可以使用屬性 tickNumber 自訂刻度數量。

作為輔助工具，您還可以提供 tickMinStep 和 tickMaxStep，它們將計算 tickNumber，使得兩個刻度之間的步長尊重這些最小值/最大值。

這裡頂部軸的 tickMinStep 為半天，底部軸的 tickMinStep 為整天。

<LineChart
  xAxis={[
    {
      ...xAxisCommon,
      tickMinStep: 3600 * 1000 * 24, // min step: 24h
    },
    {
      ...xAxisCommon,
      id: 'half days',
      tickMinStep: 3600 * 1000 * 12, // min step: 12hu
    },
  ]}
  {...config}
/>

<LineChart
  xAxis={[
    {
      ...xAxisCommon,
      tickMinStep: 3600 * 1000 * 24, // min step: 24h
    },
    {
      ...xAxisCommon,
      id: 'half days',
      tickMinStep: 3600 * 1000 * 12, // min step: 12hu
    },
  ]}
  {...config}
/>

按下 Enter 開始編輯

固定刻度位置

如果您想要更精確地控制刻度位置，可以使用 tickInterval 屬性。

此屬性接受值陣列。刻度將放置在這些值處。

對於比例類型為 'point' 的軸，tickInterval 屬性可以是 (value, index) => boolean 類型的篩選函式。

在下一個示範中，兩個軸的 scaleType 都是 'point'。頂部軸顯示預設行為。它顯示每個點的刻度。底部軸使用篩選函式僅在一天開始時顯示刻度。

<LineChart
  xAxis={[
    {
      ...xAxisCommon,
      id: 'bottomAxis',
      scaleType: 'point',
      tickInterval: (time) => time.getHours() === 0,
    },
    {
      ...xAxisCommon,
      id: 'topAxis',
      scaleType: 'point',
    },
  ]}
  {...config}
/>

<LineChart
  xAxis={[
    {
      ...xAxisCommon,
      id: 'bottomAxis',
      scaleType: 'point',
      tickInterval: (time) => time.getHours() === 0,
    },
    {
      ...xAxisCommon,
      id: 'topAxis',
      scaleType: 'point',
    },
  ]}
  {...config}
/>

按下 Enter 開始編輯

篩選刻度標籤

您可以使用 tickLabelInterval 屬性僅在刻度的子集上顯示標籤。它是 (value, index) => boolean 形式的篩選函式。

例如，tickLabelInterval: (value, index) => index % 2 === 0 將每兩個刻度顯示一次標籤。

預設情況下，刻度會被篩選，使其標籤不會重疊。您可以使用 tickLabelInterval: () => true 來覆寫此行為，這會強制顯示每個刻度的刻度標籤。

在此範例中，頂部軸是預設行為的參考。請注意，刻度標籤不會溢位。

在底部，您可以看到一天開始和中間各有一個刻度，但刻度標籤僅在一天開始時顯示。

座標軸自訂

除了座標軸定義之外，您還可以進一步自訂座標軸渲染。

修正溢位問題

如果您的刻度標籤太長，它們可能會溢位 SVG 或與軸標籤重疊。可以透過兩種方式解決此問題

透過設定邊距屬性來增加 SVG 邊框和軸之間的空間。
透過以下方式修改軸標籤位置
- 使用軸配置 labelStyle.transform。
- 將 CSS 轉換套用至類別名稱 axisClasses.label。

在以下示範中，邊距已修改為為 x 軸和 y 軸提供更多空間。x 軸標籤位置基於軸配置，而 y 軸使用 CSS 選擇器放置。

修正圖表邊距修正軸標籤位置

位置

圖表組件提供 4 個屬性：topAxis、rightAxis、bottomAxis 和 leftAxis，允許定義圖表的 4 個軸。這些屬性可以接受三種類型的值

null 不顯示軸
string 應對應於頂部和底部的 xAxis 的 ID。或對應於左側和右側的 yAxis 的 ID。
object 將作為屬性傳遞給 <XAxis /> 或 <YAxis />。它允許使用 axisId 屬性指定應表示哪個軸，並自訂軸的設計。

下面的示範使用 leftAxis={null} 移除左軸，並使用 rightAxis={{}} 設定右軸而不覆寫預設 y 軸配置。

<ScatterChart
  {...params}
  leftAxis={null}
  bottomAxis={null}
  topAxis={{}}
  rightAxis={{}}
  margin={{ top: 30, bottom: 10 }}
/>

<ScatterChart
  {...params}
  leftAxis={null}
  bottomAxis={null}
  topAxis={{}}
  rightAxis={{}}
  margin={{ top: 30, bottom: 10 }}
/>

按下 Enter 開始編輯

隱藏軸

若要隱藏軸，請將其設定為 null。例如，leftAxis={null} 隱藏左軸。

<BarChart
  series={[{ data: [1, 2, 3, 2, 1] }]}
  xAxis={[{ scaleType: 'band', data: ['A', 'B', 'C', 'D', 'E'] }]}
  height={300}
  width={300}
  leftAxis={null}
/>

<BarChart
  series={[{ data: [1, 2, 3, 2, 1] }]}
  xAxis={[{ scaleType: 'band', data: ['A', 'B', 'C', 'D', 'E'] }]}
  height={300}
  width={300}
  leftAxis={null}
/>

按下 Enter 開始編輯

渲染

可以進一步自訂軸渲染。以下是軸屬性的互動式示範。

import { ScatterChart } from '@mui/x-charts/ScatterChart';

<ScatterChart
  {/** ... */}
  bottomAxis={{
    label: "my axis",
  }}
/>

遊樂場

停用線條

停用刻度

標籤

刻度大小

文字自訂

若要自訂文字元素（刻度標籤和軸標籤），請使用軸配置的 tickLabelStyle 和 labelStyle 屬性。

import { ScatterChart } from '@mui/x-charts/ScatterChart';

<ScatterChart
  {/** ... */}
  bottomAxis={{
    labelStyle: {
      fontSize: 14,
      transform: `translateY(${
            // Hack that should be added in the lib latter.
            5 * Math.abs(Math.sin((Math.PI * props.angle) / 180))
          }px)`
    },
    tickLabelStyle: {
      angle: 45,
      textAnchor: 'start',
      fontSize: 12,
    },
  }}
/>

遊樂場

角度

文字錨點

字體大小

標籤字體大小

組合

如果您使用組合，則必須透過使用 xAxis 和 yAxis 屬性在 <ChartContainer /> 中提供軸設定。

它將為其子項提供所有比例屬性，並允許您將 <XAxis/> 和 <YAxis/> 組件用作子項。這些組件需要 axisId 屬性才能將它們連結到您在 <ChartContainer /> 中定義的軸。

您可以使用 position 屬性選擇它們的位置，該屬性接受 <XAxis /> 的 'top'/'bottom' 和 <YAxis /> 的 'left'/'right'。其他屬性與先前的章節中定義的屬性類似。

參考線

<ChartsReferenceLine /> 組件向圖表新增參考線。您可以提供 x 或 y 屬性以分別在此值處取得垂直線或水平線。

您可以為此參考線新增 label。可以使用接受 'start'、'middle' 和 'end' 值的 labelAlign 屬性放置它。元素可以使用 lineStyle 和 labelStyle 屬性設定樣式。

<ResponsiveChartContainer {...config}>
  <LinePlot />
  <ChartsReferenceLine
    x={new Date(2023, 8, 2, 9)}
    lineStyle={{ strokeDasharray: '10 5' }}
    labelStyle={{ fontSize: '10' }}
    label={`Wake up\n9AM`}
    labelAlign="start"
  />
  <ChartsReferenceLine y={50} label="Middle value" labelAlign="end" />
  <ChartsXAxis />
  <ChartsYAxis />
</ResponsiveChartContainer>

<ResponsiveChartContainer {...config}>
  <LinePlot />
  <ChartsReferenceLine
    x={new Date(2023, 8, 2, 9)}
    lineStyle={{ strokeDasharray: '10 5' }}
    labelStyle={{ fontSize: '10' }}
    label={`Wake up\n9AM`}
    labelAlign="start"
  />
  <ChartsReferenceLine y={50} label="Middle value" labelAlign="end" />
  <ChartsXAxis />
  <ChartsYAxis />
</ResponsiveChartContainer>

按下 Enter 開始編輯

API

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