ApexCharts甜甜圈图表项圆角设置方法咨询

问题描述 #

我已完成ApexCharts甜甜圈图表的基础开发，但找不到设置图表项圆角样式的方法，希望将当前直角的甜甜圈分段改成圆角效果。

原代码 #

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

解决方案 #

ApexCharts原生没有提供直接设置甜甜圈分段圆角的配置项，可通过监听图表渲染事件修改SVG路径实现效果。具体步骤如下：

1. 在chart配置中添加events.render回调函数
2. 遍历甜甜圈的所有分段路径，修改路径指令为圆角样式

修改后的完整代码 #

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

const series = [54, 45];
const options: ApexCharts.ApexOptions = {
  chart: {
    width: 380,
    type: 'donut',
    // 添加渲染事件处理圆角
    events: {
      render: function(chart) {
        const radius = 8; // 圆角大小，可根据需求调整
        const paths = chart.wrapper.querySelectorAll('svg .apexcharts-series path');
        
        paths.forEach(path => {
          let d = path.getAttribute('d') || '';
          // 替换路径中的直角指令为圆角圆弧指令
          const segments = d.split('L');
          if (segments.length > 1) {
            const lastSegment = segments.pop() || '';
            const [x, y] = lastSegment.split(' ');
            // 适配甜甜圈路径结构生成圆弧指令
            const arc = `A ${radius} ${radius} 0 0 1 ${x} ${y}`;
            d = segments.join('L') + arc;
            path.setAttribute('d', d);
          }
        });
      }
    }
  },
  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" />

说明 #

• 调整radius变量可以控制圆角大小，数值越大圆角越明显
• 该方法通过修改SVG路径实现，兼容大多数现代浏览器
• 图表数据更新或响应式重绘时，render事件会自动触发，确保圆角效果始终生效

内容的提问来源于stack exchange，提问作者rao haseeb