如何为react-minimal-pie-chart饼图的分段添加边框

react-minimal-pie-chart 的扇区基于SVG <path> 元素渲染，普通CSS的border属性对SVG路径元素不生效，直接在数据项或segmentsStyle中配置border不会产生任何效果，该库也没有内置专门的边框配置属性。

方案1：使用SVG原生stroke属性模拟边框（改动量最小） #

segmentsStyle 支持所有SVG路径的合法样式属性，用SVG描边属性代替CSS border即可实现边框效果，注意SVG描边默认是居中绘制在路径边缘，会占用部分扇区宽度，需要对应微调lineWidth抵消视觉收缩。

import { PieChart } from 'react-minimal-pie-chart'


const chartData = [
      { title: 'Completed', value: completed, color: 'var(--Green-01)' },
      { title: 'active', value: active, color: 'var(--Primary-10)' },
    ]

<PieChart
  paddingAngle={0}
  labelStyle={{
    fontWeight: 700,
    fontSize: '0.85rem',
    fill: 'var(--Dark-01)',
  }}
  labelPosition={0}
  segmentsStyle={{
    // 替换border为SVG描边属性
    stroke: 'red',
    strokeWidth: 2, // 单位为SVG视口单位，按需调整数值
  }}
  lineWidth={38} // 比原数值稍大，抵消描边占用的扇区宽度
  label={({ dataEntry }) => {
    if (dataEntry.title === 'Completed') {
      return (
        Math.round(dataEntry.value) +
        '% ' +
        I18n.t(`home_dashBoad_completed_per_label`)
      )
    }
  }}
  data={chartData}
/>

如果需要给不同扇区配置不同边框，直接在对应数据项中添加style字段配置即可，优先级高于全局segmentsStyle。

注意：如果你的饼图配置了大于0的paddingAngle（扇区间距），描边会覆盖扇区间的缝隙，这种场景请使用方案2。

方案2：双层饼图叠加实现边框（效果最稳定） #

通过绝对定位叠加两层饼图：底层为纯色的边框层，lineWidth比上层内容层大出边框宽度，上层叠放正常业务饼图，露出的底层边缘就是完整边框，不会出现描边覆盖缝隙、扇区变形的问题。

import { PieChart } from 'react-minimal-pie-chart'

const chartData = [
  { title: 'Completed', value: completed, color: 'var(--Green-01)' },
  { title: 'active', value: active, color: 'var(--Primary-10)' },
]

// 按需调整边框粗细
const BORDER_WIDTH = 3
const CONTENT_LINE_WIDTH = 35

<div style={{ position: 'relative', width: '100%', aspectRatio: '1' }}>
  {/* 底层边框饼图 */}
  <PieChart
    data={chartData.map(item => ({ ...item, color: 'red' }))}
    lineWidth={CONTENT_LINE_WIDTH + BORDER_WIDTH}
    paddingAngle={0}
    style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
  />
  {/* 上层业务内容饼图 */}
  <PieChart
    paddingAngle={0}
    labelStyle={{
      fontWeight: 700,
      fontSize: '0.85rem',
      fill: 'var(--Dark-01)',
    }}
    labelPosition={0}
    lineWidth={CONTENT_LINE_WIDTH}
    label={({ dataEntry }) => {
      if (dataEntry.title === 'Completed') {
        return (
          Math.round(dataEntry.value) +
          '% ' +
          I18n.t(`home_dashBoad_completed_per_label`)
        )
      }
    }}
    data={chartData}
    style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
  />
</div>

内容的提问来源于stack exchange，提问作者Sachinda Nirmal