我想让我的甜甜圈图表项目变成圆角,请指导

what I want

what I have made

const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });

 const series = [54, 45];
  const options: ApexCharts.ApexOptions = {
    chart: {
      width: 380,
      type: 'donut',
    },
    labels: ['Active Users', 'Inactive Users'],
    plotOptions: {
      pie: {
        expandOnClick:false, 
        donut: {
          size:'85%',
          labels: {
            show: true,
            name: {
              show: true,
              fontSize: '12px',
              fontWeight: '400',
              color: '#6E7191'
            },
            value: {
              show: true,
              fontSize: '22px',
              fontWeight: '600',
              color: '#2E285C'
            },
            total: {
              show: true,
              color: '#BCC1C8',
              fontWeight: 600,
            }
          }
        }
      }
    },
    dataLabels: {
      enabled: false,
    },
    responsive: [{
      breakpoint: 480,
      options: {
        chart: {
          width: 200
        },
        legend: {
          show: false
        }
      }
    }],
    legend: {
      position: 'left',
      offsetY: 50,
    },
    colors: ['#645CAA', '#BFACE0'],
    title: {
      text: '264',
      align: 'left',
      floating: false,
      style: {
        fontSize: '36px',
        fontWeight: '500',
        color: '#2E285C'
      },
    }
  }
<Chart series={series} options={options} type="donut" />

我已经try 过了,但我找不到任何解决方案来更改此图表的边框半径.我已经在谷歌上搜索过了,但找不到我正在写的,因为堆栈溢出说它的代码编写细节太多(Alflsjdfakjjjhfkjd Kdjfjkdhfkjdjfsdjhfkdh Jdfkjhdfkj Jdfksjhdfkj Ksdjfkdhfkdsf Jhdfkhsfjf Jsdhfkhjkjf Jdfkh Jdkjf Jdfkh Jdkjf Jfhskdf)

推荐答案

很抱歉,我在圆环图中找不到任何关于边界半径的官方解决方案,但是,你可以try RadialBarCircular Gauge chart作为替代.

在这里,ApexChart为您提供了一个lineCap option(在stroke中),它允许3个值buttsquareround.我也try 了lineCap: round for Donut图表,但不幸的是,它不起作用.

因此,如果你真的需要甜甜圈的边界,你可以在他们的GitHub中创建一个问题.

Reactjs相关问答推荐

在一个地方调用函数会影响其他地方调用该函数

在React Create App TS项目中安装material UI

GoLang有条件地为.js.gz提供服务(如果它存在),否则为.js

为什么查询错误在处理后仍出现在控制台中?RTK查询+ React

如何从Reaction-Arborist树获取排序数据

我如何在不被 destruct 的情况下将导航栏固定在顶部?

React组件未出现

useRef()的钩子调用无效

获取类别和页面的参数

错误:无法获取 RSC 负载.返回浏览器导航

警告:遇到两个子元素拥有同一把 keys .键应该是唯一的,以便组件在更新时保持其身份

Symfony ux-react:使用react_component()时React组件不会渲染

无法使axiosmockadapter正常工作

使用D3.js绘制和展示弦图的右下方象限

如何在Next.js应用程序中为路由[slug]生成.html文件?

未捕获的运行时错误:对象作为 React 子项无效

React 测试库包装器组件

如何检索包含动态段的未解析路径?

如何将我的 ID 值传递给下一个组件?

试图将页面限制为仅登录但有条件的用户似乎永远不会运行