圖表 - 自訂元件

透過 Hook，建立自訂圖表元件變得更容易。

與尺寸互動

繪圖區

圖表尺寸由幾個 props 定義

height 和 width 用於 <svg /> 大小。如果未提供，這些值會從容器衍生而來。
margin 用於在 <svg /> 邊框和繪圖區之間新增空間。

術語繪圖區指的是可用於繪製資料（散佈點、線條或圓餅圖弧形）的空間。margin 用於為額外元素（例如座標軸、圖例或標題）保留一些空間。

您可以在圖表子元件中使用 useDrawingArea Hook 來取得繪圖區的座標。

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

const { left, top, width, height } = useDrawingArea();

<ResponsiveChartContainer
  margin={{ top: 20, left: 10, right: 10, bottom: 30 }}
  height={300}
  series={[
    {
      type: 'line',
      data: [13, 13, 54, 651, 657, 987, 64, 654, 954, 654, 897, 84],
    },
  ]}
  xAxis={[{ data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] }]}
>
  <LinePlot />
  <DrawingAreaBox />
</ResponsiveChartContainer>

<ResponsiveChartContainer
  margin={{ top: 20, left: 10, right: 10, bottom: 30 }}
  height={300}
  series={[
    {
      type: 'line',
      data: [13, 13, 54, 651, 657, 987, 64, 654, 954, 654, 897, 84],
    },
  ]}
  xAxis={[{ data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] }]}
>
  <LinePlot />
  <DrawingAreaBox />
</ResponsiveChartContainer>

按下 Enter 開始編輯

比例尺

某些圖表（例如折線圖、長條圖和散佈圖）會在它們的系列資料和 SVG 座標之間進行對應。

例如，在 2022 年 12 月 6 日，值為 36,725 美元的折線圖系列可以對應到座標 (628, 514)。此操作可以反轉。x=628 的座標將與 2022 年 12 月 6 日相關聯，而 y=514 將與值 36,725 美元相關聯。

這些對應取決於 SVG 和繪圖區的尺寸。它也取決於座標軸的屬性，例如比例尺（線性、對數、平方根）和最小值/最大值。

所有這些資料都可以在 d3-scale 物件中取得。

您可以使用 useXScale() 和 useYScale() 來存取這些比例尺。兩者都接受

數字以選取要選取的座標軸索引。
字串以依其 ID 選取座標軸。

比例尺物件的產生方式使其將值對應到 SVG 座標。您不需要額外的工作來考慮繪圖區。

值到座標

d3-scale 預設方法從值對應到座標。例如，您可以如下取得 x=0 座標

const xAxisScale = useXScale(); // get the default X scale
const xOrigin = xAxisScale(0);

座標到值

d3-scale 物件允許您使用 invert 方法將座標轉換為資料值。

下一個範例包含使用不同 y 軸繪製的兩條線。透過使用 invert，可以如下解析與目前滑鼠座標 y 相關聯的值

<text>{leftAxisScale.invert(yCoordinate).toFixed(0)}</text>

API

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