图表 - 缩放和平移

在特定图表或坐标轴上启用缩放和平移。

缩放功能在 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,
      }
    }
  ]}
/>

Playground

panning

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

请参阅下面的文档，以获取此处提及的组件的所有可用属性和类的完整参考。