图表 - 坐标轴

坐标轴将值与元素位置关联起来。

坐标轴用于以下图表： <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
柱状图需要 xAxis 具有 scaleType='band' 并提供一些 data。

坐标轴格式化器

坐标轴数据可以显示在坐标轴刻度和工具提示中。要修改数据的显示方式，请使用 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 或与坐标轴标签重叠。可以通过两种方式解决此问题

通过设置 margin 属性，增加 SVG 边框和坐标轴之间的空间。
通过以下方式修改坐标轴标签位置
- 使用坐标轴配置 labelStyle.transform。
- 将 CSS 转换应用于类名 axisClasses.label。

在以下演示中，修改了 margin 以为 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,
    },
  }}
/>

演示场

角度

文本锚点

fontSize

labelFontSize

组合

如果您正在使用组合，则必须通过使用 xAxis 和 yAxis 属性在 <ChartContainer /> 中提供坐标轴设置。

它将为其子组件提供所有缩放属性，并允许您将 <XAxis/> 和 <YAxis/> 组件用作子组件。这些组件需要 axisId 属性才能将它们链接到您在 <ChartContainer /> 中定义的坐标轴。

您可以使用 position 属性选择它们的位置，该属性接受 <XAxis /> 的 'top'/'bottom' 和 <YAxis /> 的 'left'/'right'。其他属性与上一节中定义的属性相似。

参考线

<ChartsReferenceLine /> 组件向图表添加参考线。您可以提供 x 或 y 属性以分别在此值处获得垂直线或水平线。

您可以为此参考线添加 label。可以使用 labelAlign 属性放置标签，该属性接受 'start'、 'middle' 和 'end' 值。可以使用 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

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