Início / coding / Perguntas / 77268787
Accepted
Maria
Asked: 2023-10-11 04:29:57 +0800 CST

Como colocar cantos arredondados em um gráfico de barras MUI x-charts?

  • 772

Eu criei um gráfico usando mui barchart,

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

e quero dar cantos arredondados às barras. Eu tentei borderRadius para propriedade sx e propriedade de série. mas não funcionou. a propriedade sx cria uma borda ao redor do gráfico e não para todas as barras. Eu tenho o seguinte código até agora:

 <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>

e fica assim: insira a descrição da imagem aqui

Como posso fazer com que as barras tenham cantos arredondados assim:

insira a descrição da imagem aqui

reactjs

1 respostas

  1. Best Answer

    Como o elemento bar subjacente do gráfico de barras MUI é um elemento reto SVG , você não poderá aplicar CSSborder-radius . Mas você pode fornecer seu próprio Barcomponente personalizado que, em vez de renderizar um rectelemento, renderiza um pathelemento que aparece como um retângulo com cantos arredondados 1 e passa esse componente por meio do slotssuporte.

    Por exemplo:

    <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} />
    }
  }}
    />

    O que produz:

    exemplo de gráfico de barras com cantos arredondados

    (Eu gostaria de memorizar isso para um melhor desempenho - esta demonstração é apenas para você começar.)

    CodeSanbox funcionando: https://codesandbox.io/s/mui-bar-chart-with-rounded-corders-right-zms2m5?file=/Demo.js

    1 Você também pode criar um componente que ainda use a recte forneça a clipPathpara os cantos arredondados, mas na IMO esta é a opção mais simples.

    Referências:

    • 1

relate perguntas