图表 - 入门

开始使用 MUI X 图表组件。安装软件包，配置您的应用程序，并开始使用这些组件。

安装

使用您喜欢的包管理器，安装商业版本的 @mui/x-charts-pro，或免费社区版本的 @mui/x-charts。

计划

npm install @mui/x-charts

Charts 包依赖于 @mui/material。如果您尚未在项目中使用它，可以使用以下命令安装：

npm install @mui/material @emotion/react @emotion/styled

请注意，react 和 react-dom 也是对等依赖项

"peerDependencies": {
  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
},

样式引擎

Material UI 默认使用 Emotion 作为样式引擎。如果您想改用 styled-components，请运行：

npm install @mui/styled-engine-sc styled-components

请查看样式引擎指南，了解有关如何配置 styled-components 作为样式引擎的更多信息。

与 D3 一起使用

为了帮助使用 CommonJS 的用户，@mui/x-charts 包使用一个名为 @mui/x-charts-vendor 的供应商包来访问 D3 库。

如果您需要一些 D3 函数，可以使用 @mui/x-charts-vendor/d3-color 导入它们。

显示图表

图表可以通过两种方式之一渲染：作为单个组件，或通过组合子组件。

单个图表

对于常见用例，建议使用单个组件。这些组件的名称以“Chart”结尾，而不是“Plot”，并且只需要描述要渲染的数据的 series 属性。

<BarChart
  xAxis={[
    {
      id: 'barCategories',
      data: ['bar A', 'bar B', 'bar C'],
      scaleType: 'band',
    },
  ]}
  series={[
    {
      data: [2, 5, 3],
    },
  ]}
  width={500}
  height={300}
/>

<BarChart
  xAxis={[
    {
      id: 'barCategories',
      data: ['bar A', 'bar B', 'bar C'],
      scaleType: 'band',
    },
  ]}
  series={[
    {
      data: [2, 5, 3],
    },
  ]}
  width={500}
  height={300}
/>

按 Enter 开始编辑

组合图表

要组合不同的图表，例如折线图和条形图，您可以使用带有 ChartContainer 包装器的组合。

在此包装器内部，渲染坐标轴组件（如 XAxis 和 YAxis）或任何绘图组件（如 BarPlot、LinePlot、AreaPlot 和 ScatterPlot）。

访问组合页面了解更多详情。

Alphabet 股票

位置

图表由两个主要区域组成。由其 width 和 height 定义的 SVG 划定了可用空间。

在此 SVG 中，一个专用的“绘图区域”（也称为“plot area”）充当数据表示的画布。在这里，线条、条形和区域等元素以视觉方式描绘信息。它由 margin = {top, bottom, left, right} 对象控制，该对象定义了 SVG 和绘图区域之间的边距。

边距留下的空间可以显示坐标轴、标题、图例或任何其他附加信息。

有关位置配置的更多信息，请访问样式页面。

坐标轴管理

MUI X 图表对坐标轴管理采用灵活的方法，支持具有任何比例和范围组合的多轴图表。

访问坐标轴页面了解更多详情。

样式

MUI X 图表遵循 Material UI 样式，并具有您在那里找到的所有自定义工具，使调整图表与设计按钮一样简单。

访问样式页面了解更多详情。

TypeScript

为了从主题的 CSS 覆盖和默认属性自定义中获益，TypeScript 用户需要导入以下类型。在内部，它使用模块增强来扩展默认主题结构。

import type {} from '@mui/x-charts/themeAugmentation';
import type {} from '@mui/x-charts-pro/themeAugmentation';

const theme = createTheme({
  components: {
    MuiChartsAxis: {
      styleOverrides: {
        tick: {
          stroke: '#006BD6',
        },
      },
    },
  },
});