图表 - 折线图

折线图可以表达数据的特性，例如层级结构、高亮和比较。

基础

数据格式

要绘制折线，一个系列必须有一个包含数字数组的 data 属性。这个 data 数组对应 y 值。

默认情况下，这些 y 值将与从 0 开始的整数关联（0, 1, 2, 3, ...）。要修改 x 值，您应该提供带有 data 属性的 xAxis。

<LineChart
  xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
  series={[
    {
      data: [2, 5.5, 2, 8.5, 1.5, 5],
    },
  ]}
  width={500}
  height={300}
/>

<LineChart
  xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
  series={[
    {
      data: [2, 5.5, 2, 8.5, 1.5, 5],
    },
  ]}
  width={500}
  height={300}
/>

按 Enter 开始编辑

使用数据集

如果您的数据存储在对象数组中，您可以使用 dataset 辅助 prop。它接受对象数组，例如 dataset={[{x: 1, y: 32}, {x: 2, y: 41}, ...]}。

在定义系列和坐标轴时，您可以重用此数据，这要归功于 dataKey 属性。

例如 xAxis={[{ dataKey: 'x'}]}` 或 `series={[{ dataKey: 'y'}]}`。


这是一个按来源划分的世界电力生产演变的图表。

`区域`

您可以通过将系列的 area 属性设置为 true 来填充折线的区域。

<LineChart
  xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
  series={[
    {
      data: [2, 5.5, 2, 8.5, 1.5, 5],
      area: true,
    },
  ]}
  width={500}
  height={300}
/>

<LineChart
  xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
  series={[
    {
      data: [2, 5.5, 2, 8.5, 1.5, 5],
      area: true,
    },
  ]}
  width={500}
  height={300}
/>

按 Enter 开始编辑

`堆叠`

每个折线系列都可以获得一个 stack 属性，该属性期望一个字符串值。具有相同 stack 的系列将彼此堆叠。

`堆叠策略`

您可以使用 stackOffset 和 stackOrder 属性来定义系列的堆叠方式。


默认情况下，它们按照您定义的顺序堆叠，正值堆叠在 0 以上，负值堆叠在 0 以下。
有关更多信息，请参阅 堆叠文档。
部分数据
跳过缺失点
折线系列可以比坐标轴具有更少的数据点。您可以通过提供 null 值来处理具有部分数据或从不同点开始的数据的折线。
默认情况下，如果工具提示没有值，则不显示系列。要覆盖此行为，请使用 valueFormatter 在值为 null 或 undefined 时返回字符串。

当系列数据长度小于坐标轴数据长度时，溢出值是 undefined 而不是 null。


以下代码绘制了 x 在 2 到 4 之间的折线。

对于 x<2，值设置为 null，然后不显示。
对于 x>4，值设置为 undefined，然后不显示。

<LineChart
  series={[{ data: [null, null, 10, 11, 12] }]}
  xAxis={[{ data: [0, 1, 2, 3, 4, 5, 6] }]}
/>

`连接缺失点`

折线系列接受 `connectNulls` 属性，该属性将继续在具有 `null` 值的点之间进行插值。此属性可以链接两组点，它们之间有 `null` 数据。但是，它不能在外推第一个非空数据点之前或最后一个非空数据点之后的曲线。

连接空值

`点击事件`

折线图提供多个点击处理程序



onAreaClick 用于点击特定区域。
onLineClick 用于点击特定折线。
onMarkClick 用于点击特定标记。
onAxisClick 用于点击图表中的任何位置

它们都提供以下签名。
const clickHandler = (
  event, // The mouse event.
  params, // An object that identifies the clicked elements.
) => {};


点击图表
// Data from item click
// The data will appear here

// Data from axis click
// The data will appear here

`组合`

如果您正在使用组合，您可以按如下方式获取这些点击事件。请注意，如果您混合使用柱状图和折线图系列，`onAxisClick` 将处理两者。


import ChartsOnAxisClickHandler from '@mui/x-charts/ChartsOnAxisClickHandler';
// ...

<ChartContainer>
  {/* ... */}
  <ChartsOnAxisClickHandler onAxisClick={onAxisClick} />
  <LinePlot onItemClick={onLineClick} />
  <AreaPlot onItemClick={onAreaClick} />
</ChartContainer>;

样式
网格
您可以使用 `grid` prop 在图表的背景中添加网格。
有关更多信息，请参阅 坐标轴—网格 文档。

<LineChart
  dataset={dataset}
  xAxis={[{ dataKey: 'x' }]}
  series={[{ dataKey: 'y' }]}
  height={300}
  margin={{ left: 30, right: 30, top: 30, bottom: 30 }}
  grid={{ vertical: true, horizontal: true }}
/>

<LineChart
  dataset={dataset}
  xAxis={[{ dataKey: 'x' }]}
  series={[{ dataKey: 'y' }]}
  height={300}
  margin={{ left: 30, right: 30, top: 30, bottom: 30 }}
  grid={{ vertical: true, horizontal: true }}
/>

按 Enter 开始编辑

`颜色比例`

与其他图表一样，您可以直接或使用调色板修改系列颜色。


您还可以通过使用坐标轴 `colorMap` 修改颜色，该 `colorMap` 将值映射到颜色。折线图按优先级使用

y 轴颜色
x 轴颜色
系列颜色

在 样式文档 中了解有关 `colorMap` 属性的更多信息。

x 轴 colorMap无
x 轴 colorMap
y 轴 colorMap分段
y 轴 colorMap
<ScatterChart
  /* ... */
  xAxis={[{}]}
  yAxis={[{
    colorMap: {
      type: 'piecewise',
      thresholds: [0, 10],
      colors: ['red', 'green', 'blue'],
    }
  }]}
/>

`插值`

数据点之间的插值可以通过 `curve` 属性自定义。此属性期望以下字符串值之一，对应于插值方法：`'catmullRom'`、`'linear'`、`'monotoneX'`、`'monotoneY'`、`'natural'`、`'step'`、`'stepBefore'`、`'stepAfter'`。


此系列属性添加了控制系列插值的选项。不同的系列甚至可以具有不同的插值。

插值方法线性
插值方法
<LineChart
  series={[
    { curve: "linear", data: [0, 5, 2, 6, 3, 9.3] },
    { curve: "linear", data: [6, 3, 7, 9.5, 4, 2] },
  ]}
  {/* ... */}
/>

`基线`

区域图在 Y 轴 `0` 上绘制 `baseline`。这作为基本值很有用，但自定义可视化可能需要不同的基线。


要获得填充折线上方或下方空间的区域，请将 `baseline` 设置为 `\"min\"` 或 `\"max\"`。也可以提供一个 `number` 值以将基线固定在所需位置。


`baseline` 不应与堆叠区域一起使用，因为它不会按预期工作。

<LineChart
  xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
  series={[
    {
      data: [2, -5.5, 2, -7.5, 1.5, 6],
      area: true,
      baseline: 'min',
    },
  ]}
  width={500}
  height={300}
/>

<LineChart
  xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
  series={[
    {
      data: [2, -5.5, 2, -7.5, 1.5, 6],
      area: true,
      baseline: 'min',
    },
  ]}
  width={500}
  height={300}
/>

按 Enter 开始编辑

`优化`

要显示标记元素，请使用 `showMark` 系列属性。它接受布尔值或回调。下一个示例显示如何使用它来每两个数据点仅显示一个标记。


当值被高亮显示时，会为该给定值渲染一个标记。如果图表已经有一些标记（由于 `showMark=true`），则高亮标记将在其他标记之上。
可以使用 `disableHighlight` 系列属性或在折线图的根部使用 `disableLineItemHighlight` prop 来删除此行为。
在此示例中，每个具有偶数索引的值都有一个标记。高亮显示的数据都有一个标记，无论它是偶数索引还是奇数索引。

<LineChart
  xAxis={[{ data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }]}
  series={[
    {
      data: [2, 3, 5.5, 8.5, 1.5, 5, 1, 4, 3, 8],
      showMark: ({ index }) => index % 2 === 0,
    },
  ]}
  width={500}
  height={300}
/>

<LineChart
  xAxis={[{ data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }]}
  series={[
    {
      data: [2, 3, 5.5, 8.5, 1.5, 5, 1, 4, 3, 8],
      showMark: ({ index }) => index % 2 === 0,
    },
  ]}
  width={500}
  height={300}
/>

按 Enter 开始编辑

`CSS`

折线图由三个元素组成，分别名为 `LineElement`、`AreaElement` 和 `MarkElement`。可以使用 CSS 类名 `.MuiLineElement-root`、`.MuiAreaElement-root` 或 `.MuiMarkElement-root` 选择每个元素。


如果要选择给定系列的元素，可以使用类 `.MuiLineElement-series-<seriesId>`，其中 `<seriesId>` 是您要自定义的系列的 id。
在下一个示例中，每个折线样式都使用虚线自定义，并删除了标记。德国 GDP 的区域也获得了自定义渐变颜色。`myGradient` 的定义作为图表组件的子元素传递。
sx={{
  '& .MuiLineElement-root': {
    strokeDasharray: '10 5',
    strokeWidth: 4,
  },
  '& .MuiAreaElement-series-Germany': {
    fill: "url('#myGradient')",
  },
}}

`动画`

要在创建和更新图表时跳过动画，您可以使用 `skipAnimation` prop。设置为 `true` 时，它会跳过由 `@react-spring/web` 驱动的动画。


图表容器已经使用 `@react-spring/web` 中的 `useReducedMotion` 来跳过动画 根据用户偏好。


如果您支持以交互方式从图表中添加或删除系列，则必须提供系列的 id。
否则，图表将无法知道您是在修改、删除还是添加一些系列。这会导致奇怪的行为。
// For a single component chart
<LineChart skipAnimation />

// For a composed chart
<ResponsiveChartContainer>
  <LinePlot skipAnimation />
  <AreaPlot skipAnimation />
</ResponsiveChartContainer>


跳过动画

`API`

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



<AnimatedArea />
<AnimatedLine />
<AreaElement />
<AreaPlot />
<ChartsGrid />
<ChartsOnAxisClickHandler />
<LineChart />
<LineChartPro />
<LineElement />
<LineHighlightElement />
<LineHighlightPlot />
<LinePlot />
<MarkElement />
<MarkPlot />


MUI 与乌克兰团结一致。目录
基础数据格式
使用数据集
区域
堆叠堆叠策略
部分数据跳过缺失点
连接缺失点
点击事件组合
样式网格
颜色比例
插值
基线
优化
CSS
动画
API
成为钻石赞助商