圖表 - 縮放與平移

在特定圖表或座標軸上啟用縮放與平移功能。

縮放功能在 Pro 版本的圖表上可用：<LineChartPro />、<BarChartPro />、<ScatterChartPro />。

基本用法

若要啟用縮放與平移，請在所需的座標軸上將 zoom 屬性設定為 true。

啟用縮放功能將會啟用所有互動，這些互動都盡可能地直觀。

支援以下動作

滾動：透過滾動滑鼠滾輪來放大/縮小。
拖曳：透過拖曳滑鼠來平移圖表。
捏合：透過捏合圖表來放大/縮小。

<ScatterChartPro
  width={600}
  height={300}
  xAxis={[
    {
      zoom: true,
    },
  ]}
  yAxis={[
    {
      zoom: true,
    },
  ]}
  series={series}
/>

<ScatterChartPro
  width={600}
  height={300}
  xAxis={[
    {
      zoom: true,
    },
  ]}
  yAxis={[
    {
      zoom: true,
    },
  ]}
  series={series}
/>

按下 Enter 開始編輯

<BarChartPro
  width={600}
  height={300}
  xAxis={[
    {
      scaleType: 'band',
      data: data.map((v, i) => i),
      zoom: true,
    },
  ]}
  series={series}
/>

<BarChartPro
  width={600}
  height={300}
  xAxis={[
    {
      scaleType: 'band',
      data: data.map((v, i) => i),
      zoom: true,
    },
  ]}
  series={series}
/>

按下 Enter 開始編輯

<LineChartPro
  width={600}
  height={300}
  xAxis={[
    {
      zoom: true,
      scaleType: 'point',
      data: data.map((v, i) => i),
    },
  ]}
  series={series}
/>

<LineChartPro
  width={600}
  height={300}
  xAxis={[
    {
      zoom: true,
      scaleType: 'point',
      data: data.map((v, i) => i),
    },
  ]}
  series={series}
/>

按下 Enter 開始編輯

縮放選項

您可以透過設定 zoomOptions 屬性來自訂縮放行為。

以下選項可用

minStart：座標軸範圍的起始百分比。介於 0 到 100 之間。
maxEnd：縮放範圍的結束百分比。
step：縮放功能的步階。定義縮放的精細度。
minSpan：限制最小跨度大小。
maxSpan：限制最大跨度大小。
panning：啟用或停用平移。

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

<BarChart
  // ...
  xAxis={[
    {
      // ...
      zoom: {
        minStart: 0,
        maxEnd: 100,
        minSpan: 10,
        maxSpan: 100,
        step: 5,
        panning: true,
      }
    }
  ]}
/>

遊樂場

平移

minStart

maxEnd

minSpan

maxSpan

step

受控縮放

您可以透過設定 zoom 和 onZoomChange 屬性來控制縮放狀態。這樣一來，您可以從圖表外部控制縮放狀態。

onZoomChange 屬性是一個接收新縮放狀態的函數。

而 zoom 屬性是一個物件陣列，為每個啟用縮放功能的座標軸定義縮放狀態。

axisId：要控制的座標軸 ID。
start：座標軸範圍的起始百分比。
end：縮放範圍的結束百分比。

<Button onClick={() => setZoom([{ axisId: 'my-x-axis', start: 0, end: 100 }])}>
  Reset zoom
</Button>
<LineChartPro
  {...chartProps}
  zoom={zoom}
  onZoomChange={setZoom}
  xAxis={[
    {
      zoom: true,
      scaleType: 'point',
      id: 'my-x-axis',
      data: data.map((v, i) => i),
    },
  ]}
/>

<Button onClick={() => setZoom([{ axisId: 'my-x-axis', start: 0, end: 100 }])}>
  Reset zoom
</Button>
<LineChartPro
  {...chartProps}
  zoom={zoom}
  onZoomChange={setZoom}
  xAxis={[
    {
      zoom: true,
      scaleType: 'point',
      id: 'my-x-axis',
      data: data.map((v, i) => i),
    },
  ]}
/>

按下 Enter 開始編輯

縮放篩選

您可以透過在座標軸設定中設定 zoom.filterMode 屬性，使座標軸的縮放影響一個或多個座標軸的極值。

如果 zoom.filterMode 設定為 "discard"，則會篩選掉此座標軸可見範圍之外的資料點，而其他座標軸將修改其縮放範圍以符合可見範圍。
如果 zoom.filterMode 設定為 "keep"（預設值），則會保留可見範圍之外的資料點。然後，其他座標軸將不會受到影響。

請參閱以下範例，了解次要座標軸如何適應主要座標軸的可見部分。

<BarChartPro
  dataset={dataset}
  xAxis={[
    {
      scaleType: 'band',
      dataKey: 'letter',
      zoom: { filterMode: 'discard' },
    },
  ]}
  yAxis={[{ valueFormatter }]}
  series={[{ label: 'Letter Frequency', dataKey: 'frequency', valueFormatter }]}
  {...chartProps}
/>

<BarChartPro
  dataset={dataset}
  xAxis={[
    {
      scaleType: 'band',
      dataKey: 'letter',
      zoom: { filterMode: 'discard' },
    },
  ]}
  yAxis={[{ valueFormatter }]}
  series={[{ label: 'Letter Frequency', dataKey: 'frequency', valueFormatter }]}
  {...chartProps}
/>

按下 Enter 開始編輯

API

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