如何基于Victory Charts实现指定样式的环形饼图？

问题说明 #

目标样式为：仅显示一段带圆角的彩色弧形环形，其余区域为空白，环形中心放置文本。当前代码生成了两段弧形，不符合预期。

修改后的代码 #

import './App.css';
import { VictoryPie, VictoryLabel } from 'victory';

function App() {
  // 调整数据：保留目标数据项，剩余部分用透明占位项填充
  const data = [
    { x: "Target", y: 10, isTarget: true },
    { x: "Empty", y: 90, isTarget: false },
  ];
  const options = {
    // 目标项用指定蓝色，空白项设为完全透明
    colorScale: ["#3C7BBF", "rgba(0,0,0,0)"],
    innerRadius: 80,
    outerRadius: 120, // 调整外环半径，控制环形宽度
    labels: () => ``, // 隐藏所有扇区标签
    // 仅给目标数据项设置圆角
    cornerRadius: ({ datum }) => datum.isTarget ? 12 : 0,
  };
  
  return (
    <div className="App" style={{ width: '240px', height: '240px' }}>
      <VictoryPie
        data={data} 
        {...options} 
        width={240} 
        height={240}
        // 确保空白扇区完全隐藏
        style={{
          data: {
            fillOpacity: ({ datum }) => datum.isTarget ? 1 : 0,
            stroke: ({ datum }) => datum.isTarget ? "#3C7BBF" : "transparent"
          }
        }}
      />
      
      {/* 中心文本，固定居中 */}
      <VictoryLabel 
        style={{ fontSize: 18, fill: "#333" }}
        x={120}
        y={120}
        textAnchor="middle"
        verticalAnchor="middle"
        text="Text in the hole"
      />
    </div>
  );
}

export default App;

关键修改点 #

• 数据结构调整：新增占比为剩余部分的空白数据项，通过isTarget标记区分样式
• 颜色控制：空白项使用完全透明色，视觉上彻底隐藏
• 圆角设置：仅给目标数据项添加圆角，实现弧形两端的圆角效果
• 环形尺寸优化：通过innerRadius和outerRadius调整环形宽度，匹配目标样式比例
• 中心文本定位：基于图表宽高直接设置中心坐标，确保文本精准居中

内容的提问来源于stack exchange，提问作者Muhammad Haris