MUI X Charts

一个快速且可扩展的 React 图表组件库，用于数据可视化。

概述

@mui/x-charts 是一个 MIT 许可的库，用于渲染图表，它依赖于 D3.js 进行数据操作，并使用 SVG 进行渲染。与其他 MUI X 组件一样，图表是生产就绪的组件，可以平滑地集成到您的应用程序中。

凭借高度的自定义性，MUI X Charts 提供了三个级别的自定义层：具有出色默认设置的单个组件、广泛的配置属性和用于灵活组合的子组件。此外，您还可以使用所有 MUI System 工具，例如主题覆盖或 sx 属性。

import * as React from 'react';
import { BarChart } from '@mui/x-charts/BarChart';

export default function ChartsOverviewDemo() {
  return (
    <BarChart
      series={[
        { data: [35, 44, 24, 34] },
        { data: [51, 6, 49, 30] },
        { data: [15, 25, 30, 50] },
        { data: [60, 50, 15, 25] },
      ]}
      height={290}
      xAxis={[{ data: ['Q1', 'Q2', 'Q3', 'Q4'], scaleType: 'band' }]}
      margin={{ top: 10, bottom: 30, left: 40, right: 10 }}
    />
  );
}

import * as React from 'react';
import { BarChart } from '@mui/x-charts/BarChart';

export default function ChartsOverviewDemo() {
  return (
    <BarChart
      series={[
        { data: [35, 44, 24, 34] },
        { data: [51, 6, 49, 30] },
        { data: [15, 25, 30, 50] },
        { data: [60, 50, 15, 25] },
      ]}
      height={290}
      xAxis={[{ data: ['Q1', 'Q2', 'Q3', 'Q4'], scaleType: 'band' }]}
      margin={{ top: 10, bottom: 30, left: 40, right: 10 }}
    />
  );
}

按下 Enter 开始编辑