Reactjs 如何在MUI x图表条形图上放置圆角

发布于10月11日

我已经用梅柱图创建了一个图表，

import { BarChart } from '@mui/x-charts/BarChart';
import { ThemeProvider, createTheme, useTheme } from '@mui/material/styles';

我想让wine 吧变成圆角.我try 了SX属性和Series属性的borderRadius.但这并没有奏效.SX属性在图表周围创建边框，而不是 for each 条形图创建边框. 到目前为止，我有以下代码:

 <ThemeProvider theme={darkTheme}  >
    <BarChart
       
        sx={[{p: 5, border: 1, borderRadius: 3}]}
        yAxis={[
              {
               id: 'barCategories',
               data: ['A', 'B', 'C', 'D', 'E'],
               scaleType: 'band',
              },
         ]}
         series={[
                {
                 data: [50, 20, 85, 60, 20],
                 color: '#fff',
                },
                            
          ]}
          layout="horizontal"
     />
</ThemeProvider>

and it looks like this:

我怎么才能让wine 吧看起来像这样的圆角:

推荐答案

因为MUI Bar Chart的底层条元素是SVG rect元素，所以您将不能应用CSS border-radius.但您可以提供您自己的定制Bar component，它不呈现rect元素，而是呈现为圆角矩形¹，并通过slotsprops 传递该组件.

例如:

<BarChart
  ...
  layout="horizontal"
  slots={{
    bar: (props) => {
      const radius = 7;
      const {x, y, height, width, ownerState, ...restProps} = props
      
      // Path of a rectangle with rounded corners on the right
      // for horizontal layout
      const d = `M${x},${y} h${width - radius} a${radius},${radius} 0 0 1 ${radius},${radius}v ${height - 2 * radius} a${radius},${radius} 0 0 1 ${-radius},${radius} h${radius - width}z`
      return <path d={d} fill={ownerState.color}
      {...restProps} />
    }
  }}
    />

这将产生: