跳到内容
+

图表 - 图例

图例是将符号和颜色映射到系列标签的 UI 元素。

基本显示

在图表组件中，图例将系列与 label 属性及其颜色链接起来。

- MUI 组件库−20−15−10−505101520−20−1001020
按 Enter 开始编辑

自定义

位置

图例可以以 'column' 或 'row' 布局显示，通过 direction 属性控制。

也可以使用 position: { vertical, horizontal } 属性移动图例，该属性定义图例在 SVG 内的对齐方式。

  • vertical 可以是 'top'、'middle' 或 'bottom'。
  • horizontal 可以是 'left'、'middle' 或 'right'。

您可以使用 padding 属性为给定的 position 添加间距，它可以是数字或对象 { top, bottom, left, right }。此 padding 将在 SVG 边框和图例之间添加空间。

默认情况下，图例放置在图表上方。

- MUI 组件库
import { PieChart } from '@mui/x-charts/PieChart';

<PieChart
  margin={{ top: 100, bottom: 100, left: 100, right:100 }}
  {/** ... */}
  slotProps={{
    legend: {
      direction: 'row',
      position: { vertical: 'top', horizontal: 'middle' },
      padding: 0,
    },
  }}
/>

Playground

隐藏

您可以使用属性 slotProps.legend.hidden 隐藏图例。

- MUI 组件库
按 Enter 开始编辑

尺寸

在图例内部，您可以使用 itemMarkWidth 和 itemMarkHeight 属性自定义标记的宽度和高度的像素值。

您还可以访问 markGap 属性来更改标记及其标签之间的间隙，或 itemGap 来更改两个图例项目之间的间隙。这两个属性都以像素为单位影响定义的值。

- MUI 组件库
import { PieChart } from '@mui/x-charts/PieChart';

<PieChart
  margin={{ top: 100, bottom: 10, left: 10, right:100 }}
  {/** ... */}
  slotProps={{
    legend: {
      direction: props.direction,
      position: {
        vertical: 'middle',
        horizontal: 'right',
      },
      itemMarkWidth: 20,
      itemMarkHeight: 2,
      markGap: 5,
      itemGap: 10,
    }
  }}
/>

Playground

标签样式

要在图例标签中换行，请使用特殊的 \n 字符。要自定义标签样式，您不应使用 CSS。而是将样式对象传递给 labelStyle 属性。

- MUI 组件库
import { PieChart } from '@mui/x-charts/PieChart';

<PieChart
  margin={{ top: 100, bottom: 10, left: 10, right:100 }}
  {/** ... */}
  series={[
    { ..., label: 'series A'}
    ...
  ]}
  slotProps={{
    legend: {
      labelStyle: {
        fontSize: 14,
        fill: 'blue',
      },
    },
  }}
/>

Playground

颜色图例

要显示与 colorMap 关联的图例，您可以使用

  • 如果您使用 colorMap.type='continuous'，则使用 <ContinuousColorLegend />
  • 如果您使用 colorMap.type='piecewise'，则使用 <PiecewiseColorLegend />。

选择数据

要选择要表示的颜色映射，请使用以下属性

  • axisDirection 可以是 'x'、'y' 或 'z'。它指示哪个轴包含 colorMap 定义。
  • axisId 要使用的轴的 ID，以防所选方向包含多个轴。

相对于 1961-1990 年平均水平的全球温度异常

位置

此组件的位置与 系列图例 的位置完全相同。

连续颜色映射

要修改渐变的形状，请使用 length 和 thickness 属性。length 可以是数字（以像素为单位）或百分比字符串。"100%" 对应于 SVG 尺寸。

要格式化标签，请使用 minLabel/maxLabel。它们接受要显示的字符串。或函数 ({value, formattedValue}) => string。

标签和渐变条的对齐方式可以通过 align 属性修改。

import { LineChart } from '@mui/x-charts/LineChart';
import { ContinuousColorLegend } from '@mui/x-charts/ChartsLegend';

<LineChart
  margin={{ top: 50, right: 20 }}
  {/** ... */}
>
  <ContinuousColorLegend
      axisDirection="x"
      position={{ vertical: 'top', horizontal: 'middle' }}
      direction="row"
      length="50%"
      thickness={5}
      align="middle"
      labelStyle={{ fontSize: 10 }}
    />
</LineChart>

Playground

分段颜色映射

分段图例与系列图例非常相似。它接受相同的属性用于自定义。

属性 hideFirst 和 hideLast 允许隐藏两个极端片段：值低于最小阈值和值高于最大阈值。

要覆盖默认生成的标签，请提供 labelFormatter 属性。它接受片段的最小值/最大值并返回标签。

对于第一个和最后一个片段，值可以为 null。返回 null 会从图例中删除该片段。

labelFormatter = ({ min, max, formattedMin, formattedMax }) => string | null;

import { LineChart } from '@mui/x-charts/LineChart';
import { PiecewiseColorLegend } from '@mui/x-charts/ChartsLegend';

<LineChart
  margin={{ top: 50, right: 20 }}
  {/** ... */}
>
  <PiecewiseColorLegend
      axisDirection="x"
      position={{ vertical: 'top', horizontal: 'middle' }}
      direction="row"
      padding={0}
      labelStyle={{ fontSize: 10 }}
    />
</LineChart>

Playground

点击事件

您可以将 onItemClick 函数传递给 ChartsLegend 或 PiecewiseColorLegend 组件来处理点击事件。它们都提供以下签名。

const clickHandler = (
  event, // The click event.
  context, // An object that identifies the clicked item.
  index, // The index of the clicked item.
) => {};

context 对象包含不同的属性，具体取决于图例类型。单击图例项目以查看其内容。

图表图例

- MUI 组件库

饼图图例

- MUI 组件库

饼图图例

- MUI 组件库

点击图表

// Index from item click: 

// Context from item click
// The data will appear here

API

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