为条形图中的条形指定半径

Question

使用react-chartjs-2模块将边框半径应用于Bar_Chart的条形，因此请仅建议对此代码进行更改。 我尝试了数据组件中的半径，但它不起作用。

import { Bar } from 'react-chartjs-2';

<Bar 
        data={{
          labels :['2020-10-26', '2020-10-27', '2020-10-28', '2020-10-29'],
          
          
          datasets: [
            {
              label: 'r',
              data: [130,220,310,420],
              backgroundColor: 'rgb(255, 144, 18)',
             
              
            },
            {
              label: 'm',
              data: [100,200,149,330],
              backgroundColor: '#66CCFF',
              
            },
            {
              label: 'u',
              data: [90,150,30,240],
              backgroundColor: '#00FF99',
              
            },
          ],
        }}
        options={{
          responsive: true,
          cornerRadius:19,
          // plugins: {
          legend: {
            cursor: "pointer",
            display:true,
            position:'bottom',
            labels: {
              usePointStyle: true,
              boxWidth:10,
              }
            },
            
            
          // },
          scales: {
            xAxes: [{
              gridLines: {
                  display:false
              }
          }]}
        }} 
        
        margin={{
          top: 5,
          right: 30,
          left: 20,
          bottom: 5,
        }} 
      />

希望我的条形从上面看是圆形的，就像这样，只有视觉效果是示例而不是代码

https://codepen.io/jordanwillis/pen/jBoppb

Answer 1

您必须按照以下代码在数据集中应用 borderRadius 参数

datasets: [
            {
              label: 'r',
              data: [130,220,310,420],
              backgroundColor: 'rgb(255, 144, 18)',
              borderRadius : 50  // You can apply any value as per your requirement
              
            },
            {
              label: 'm',
              data: [100,200,149,330],
              backgroundColor: '#66CCFF',
              borderRadius : 50 
            },
            {
              label: 'u',
              data: [90,150,30,240],
              backgroundColor: '#00FF99',
              borderRadius : 50 
            }]

Answer 2

尝试在选项对象中使用

borderRadius

Answer 3

在这里检查我的配置：

const config = {
  type: 'bar',
  data: data,
  maintainAspectRatio: false,
   borderRadius: 7, // radius of the bar
 options: {
   scales: {
     y: {
      beginAtZero: true
    }
  }
},
  plugins: {
  legend: {
  position: 'top' as const,
  align: 'end' as const
  },
  title: {
  display: true,
  text: 'Statistics: Average IQ by age',
  color: '#00121C',
  align: 'start' as const,
  font: {
    size: 24
    }
   }
  }
};

对于选项对象