图表 - 自定义组件

通过 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 和类的完整参考。