圖表 - 開始使用

開始使用 MUI X Charts 組件。安裝套件、設定您的應用程式，並開始使用這些組件。

安裝

使用您最喜愛的套件管理器，安裝商業版本的 @mui/x-charts-pro，或免費社群版本的 @mui/x-charts。

方案

npm install @mui/x-charts

Charts 套件對 @mui/material 有 peer dependency。如果您尚未在專案中使用它，可以使用以下命令安裝

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

請注意，react 和 react-dom 也是 peer dependencies

"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 prop。

<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 Charts 具有彈性的座標軸管理方法，支援具有任何比例和範圍組合的多軸圖表。

請訪問座標軸頁面以獲取更多詳細資訊。

樣式設定

MUI X Charts 遵循 Material UI 樣式設定，並具有您在那裡找到的所有自訂工具，使調整圖表就像設計按鈕一樣簡單。

請訪問樣式設定頁面以獲取更多詳細資訊。

TypeScript

為了從主題的 CSS 覆寫和預設 prop 自訂中獲益，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',
        },
      },
    },
  },
});