MUI X 圖表

一個快速且可擴展的 React 圖表組件庫，用於資料視覺化。

概覽

@mui/x-charts 是一個 MIT 授權的函式庫，用於渲染圖表，依賴 D3.js 進行資料操作，並使用 SVG 進行渲染。而且，與其他 MUI X 組件一樣，圖表是可直接用於生產環境的組件，可以順利整合到您的應用程式中。

MUI X 圖表具有高度的自訂性，提供三個層級的自訂層：具有出色預設值的單一組件、廣泛的設定屬性，以及用於彈性組合的子組件。此外，您也可以使用所有 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 開始編輯