圖表 - 長條圖

長條圖透過長條的長度來表達數量，並使用共同的基準線。

基礎知識

長條圖系列應包含一個 data 屬性，其中包含一個數值陣列。

您可以使用 xAxis 自訂長條刻度。此座標軸可能具有 scaleType='band'，且其 data 應與您的系列長度相同。

<BarChart
  xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]}
  series={[{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }]}
  width={500}
  height={300}
/>

<BarChart
  xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]}
  series={[{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }]}
  width={500}
  height={300}
/>

按下 Enter 開始編輯

使用資料集

如果您的資料儲存在物件陣列中，您可以使用 dataset 輔助屬性。它接受物件陣列，例如 dataset={[{x: 1, y: 32}, {x: 2, y: 41}, ...]}。

當定義系列和座標軸時，您可以重複使用此資料，這要歸功於 dataKey 屬性。

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

<BarChart
  dataset={dataset}
  xAxis={[{ scaleType: 'band', dataKey: 'month' }]}
  series={[
    { dataKey: 'london', label: 'London', valueFormatter },
    { dataKey: 'paris', label: 'Paris', valueFormatter },
    { dataKey: 'newYork', label: 'New York', valueFormatter },
    { dataKey: 'seoul', label: 'Seoul', valueFormatter },
  ]}
  {...chartSetting}
/>

<BarChart
  dataset={dataset}
  xAxis={[{ scaleType: 'band', dataKey: 'month' }]}
  series={[
    { dataKey: 'london', label: 'London', valueFormatter },
    { dataKey: 'paris', label: 'Paris', valueFormatter },
    { dataKey: 'newYork', label: 'New York', valueFormatter },
    { dataKey: 'seoul', label: 'Seoul', valueFormatter },
  ]}
  {...chartSetting}
/>

按下 Enter 開始編輯

長條大小

您可以使用 categoryGapRatio 和 barGapRatio 屬性定義長條尺寸。

categoryGapRatio 定義兩個類別之間的間隙。該比率是透過將間隙大小除以類別大小（長條使用的空間）來獲得的。

barGapRatio 定義同一類別的兩個長條之間的間隙。它是間隙大小除以長條大小。因此，值為 1 將導致長條之間的間隙等於長條寬度。值為 -1 將使長條彼此重疊。

import { BarChart } from '@mui/x-charts/BarChart';

<BarChart
  // ...
  xAxis={[
    {
      scaleType: 'band'
      data: ['Page 1', 'Page 2', 'Page 3']
      categoryGapRatio: 0.3
      barGapRatio: 0.1
    }
/>

遊樂場

categoryGapRatio

barGapRatio

堆疊

每個長條系列都可以取得預期字串值的 stack 屬性。具有相同 stack 的系列將彼此堆疊。

<BarChart
  dataset={balanceSheet}
  series={addLabels([
    { dataKey: 'currAss', stack: 'assets' },
    { dataKey: 'nCurrAss', stack: 'assets' },
    { dataKey: 'curLia', stack: 'liability' },
    { dataKey: 'nCurLia', stack: 'liability' },
    { dataKey: 'capStock', stack: 'equity' },
    { dataKey: 'retEarn', stack: 'equity' },
    { dataKey: 'treas', stack: 'equity' },
  ])}
  xAxis={[{ scaleType: 'band', dataKey: 'year' }]}
  slotProps={{ legend: { hidden: true } }}
  width={600}
  height={350}
/>

<BarChart
  dataset={balanceSheet}
  series={addLabels([
    { dataKey: 'currAss', stack: 'assets' },
    { dataKey: 'nCurrAss', stack: 'assets' },
    { dataKey: 'curLia', stack: 'liability' },
    { dataKey: 'nCurLia', stack: 'liability' },
    { dataKey: 'capStock', stack: 'equity' },
    { dataKey: 'retEarn', stack: 'equity' },
    { dataKey: 'treas', stack: 'equity' },
  ])}
  xAxis={[{ scaleType: 'band', dataKey: 'year' }]}
  slotProps={{ legend: { hidden: true } }}
  width={600}
  height={350}
/>

按下 Enter 開始編輯

堆疊策略

您可以使用 stackOffset 和 stackOrder 屬性來定義系列的堆疊方式。

預設情況下，它們會按照您定義的順序堆疊，正值堆疊在 0 以上，負值堆疊在 0 以下。

如需更多資訊，請參閱堆疊文件。

版面配置

長條方向

透過提供 layout="horizontal" 屬性，可以水平版面配置呈現長條圖。如果您使用組合，則應將屬性 layout: 'horizontal' 設定為每個長條系列物件。

<BarChart
  dataset={dataset}
  yAxis={[{ scaleType: 'band', dataKey: 'month' }]}
  series={[{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }]}
  layout="horizontal"
  {...chartSetting}
/>

<BarChart
  dataset={dataset}
  yAxis={[{ scaleType: 'band', dataKey: 'month' }]}
  series={[{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }]}
  layout="horizontal"
  {...chartSetting}
/>

按下 Enter 開始編輯

刻度位置

當使用 "band" 比例尺時，座標軸具有一些關於刻度位置的額外自訂屬性。

tickPlacement 用於刻度的位置
tickLabelPlacement 用於與刻度相關聯的標籤位置

您可以在以下範例中測試所有配置選項

<TickParamsSelector
  tickPlacement={tickPlacement}
  tickLabelPlacement={tickLabelPlacement}
  setTickPlacement={setTickPlacement}
  setTickLabelPlacement={setTickLabelPlacement}
/>
<BarChart
  dataset={dataset}
  xAxis={[
    { scaleType: 'band', dataKey: 'month', tickPlacement, tickLabelPlacement },
  ]}
  {...chartSetting}
/>

<TickParamsSelector
  tickPlacement={tickPlacement}
  tickLabelPlacement={tickLabelPlacement}
  setTickPlacement={setTickPlacement}
  setTickLabelPlacement={setTickLabelPlacement}
/>
<BarChart
  dataset={dataset}
  xAxis={[
    { scaleType: 'band', dataKey: 'month', tickPlacement, tickLabelPlacement },
  ]}
  {...chartSetting}
/>

按下 Enter 開始編輯

網格線

您可以使用 grid 屬性在圖表的背景中新增網格線。

請參閱座標軸—網格線文件以取得更多資訊。

<BarChart
  dataset={dataset}
  yAxis={[{ scaleType: 'band', dataKey: 'month' }]}
  series={[{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }]}
  layout="horizontal"
  grid={{ vertical: true }}
  {...chartSetting}
/>

<BarChart
  dataset={dataset}
  yAxis={[{ scaleType: 'band', dataKey: 'month' }]}
  series={[{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }]}
  layout="horizontal"
  grid={{ vertical: true }}
  {...chartSetting}
/>

按下 Enter 開始編輯

顏色比例尺

與其他圖表一樣，您可以直接修改系列顏色，或使用調色盤。

您也可以透過使用座標軸 colorMap 來修改顏色，它將數值對應到顏色。長條圖依優先順序使用

數值座標軸顏色
帶狀座標軸顏色
系列顏色

在樣式文件中深入瞭解 colorMap 屬性。

x 軸 colorMap

y 軸 colorMap

<ScatterChart
  /* ... */
  xAxis={[{
    colorMap: {
      type: 'piecewise',
      thresholds: [new Date(2021, 1, 1), new Date(2023, 1, 1)],
      colors: ['blue', 'red', 'blue'],
    }
  }]}
  yAxis={[{}]}
/>

邊框圓角

若要為您的長條圖提供圓角，您可以變更 BarChart 上的 borderRadius 屬性的值。

它適用於任何正值，並正確應用於水平版面配置、堆疊和負值。

邊框圓角

版面配置

<BarChart
  /* ... */
  borderRadius={10}
/>

<BarChart
  series={[
    { data: [4, 2, 5, 4, 1], stack: 'A', label: 'Series A1' },
    { data: [2, 8, 1, 3, 1], stack: 'A', label: 'Series A2' },
    { data: [14, 6, 5, 8, 9], label: 'Series B1' },
  ]}
  barLabel={(item, context) => {
    if ((item.value ?? 0) > 10) {
      return 'High';
    }
    return context.bar.height < 60 ? null : item.value?.toString();
  }}
  width={600}
  height={350}
/>

<BarChart
  series={[
    { data: [4, 2, 5, 4, 1], stack: 'A', label: 'Series A1' },
    { data: [2, 8, 1, 3, 1], stack: 'A', label: 'Series A2' },
    { data: [14, 6, 5, 8, 9], label: 'Series B1' },
  ]}
  barLabel={(item, context) => {
    if ((item.value ?? 0) > 10) {
      return 'High';
    }
    return context.bar.height < 60 ? null : item.value?.toString();
  }}
  width={600}
  height={350}
/>

按下 Enter 開始編輯

點擊事件

長條圖提供兩個點擊處理常式

onItemClick 用於點擊特定長條。
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} />
  <BarPlot onItemClick={onItemClick} />
</ChartContainer>;

動畫

若要在建立和更新圖表時略過動畫，您可以使用 skipAnimation 屬性。當設定為 true 時，它會略過由 @react-spring/web 驅動的動畫。

圖表容器已使用來自 @react-spring/web 的 useReducedMotion 來略過動畫，根據使用者偏好。

// For a single component chart
<BarChart skipAnimation />

// For a composed chart
<ResponsiveChartContainer>
  <BarPlot skipAnimation />
</ResponsiveChartContainer>

略過動畫

項目數量

系列數量

API

請參閱以下文件，以取得此處提及的組件的所有可用屬性和類別的完整參考。