图表 - 条形图

条形图通过条形的长度来表达数量，使用一个共同的基线。

基础知识

条形图系列应包含一个 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
    }
/>

Playground

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

请参阅下面的文档，以获得此处提及的组件的所有可用属性和类的完整参考。