给条形图中的条形半径答案

【问题标题】：Give radius to bars in bar graph给条形图中的条形半径
【发布时间】：2021-12-26 09:38:27
【问题描述】：

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

【问题讨论】：

标签： reactjs graph bar-chart recharts react-chartjs-2

【解决方案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 
            }]

【讨论】：

以前试过但没用