CSS 样式饼图/圆环图

Question

我正在使用 Recharts 尝试完成带有圆角段的圆环图，其最终看起来应该或多或少像这样：\n

\n

这是我能达到的最接近的结果，但正如你所看到的，我遇到了一些问题：\n

\n

首先，第一段的两个边缘与其他段重叠。尽管我进行了搜索，但我不知道如何纠正它。
\n接下来，我正在努力正确对齐图例。我发现没有办法定义 svg 文本的宽度，因此长文本会转到下一行。（这些文本包含在变量中并且没有硬编码）

\n

这是我的chart.js。我裁剪了一些部分以使其更简单，但如果需要，我会发布整个内容。

\n

const renderLabelContent = (props) => {\n  const { value, title, x, y, midAngle } = props;\n  return (\n    <g transform={`translate(${x}, ${y})`} textAnchor={\'start\'}>\n      <text x={(midAngle < -90 || midAngle >= 90) ? (0 - (title.length * 3)) : 0} y={0}\n        {`${title}`}\n      </text>\n      <text x={(midAngle < -90 || midAngle >= 90) ? (0 - (title.length * 3)) : 0} y={20}>\n        {`${value}`}\xe2\x82\xac\n      </text>\n    </g>\n  );\n};\n...\nexport default class Chart extends Component {\n...\n  render() {\n    return (\n      <div className="pie-charts">\n        <div className="pie-chart-wrapper">\n          <PieChart width={400} height={400}>\n            <Pie\n              stroke="none"\n              legendType="circle"\n              data={this.state.data}\n              dataKey="value"\n              startAngle={180}\n              endAngle={-180}\n              cornerRadius={100}\n              innerRadius={60}\n              outerRadius={80}\n              label={renderLabelContent}\n              paddingAngle={-10}\n              labelLine={false}\n              isAnimationActive={true}\n            >\n              {\n                data.map((entry, index) => (\n                  <Cell key={`slice-${index}`} fill={entry.color} />\n                ))\n              }\n              <Label width={50} position="center">\n                2,87\xe2\x82\xac\n              </Label>\n            </Pie>\n          </PieChart>\n        </div>\n      </div>\n    );\n  }\n}\n

\n

Answer 1

我认为有几种方法可以解决 Labels 问题，在 recharts 中，您可以在 Label contentprop 上放置一个 React 组件，这可能是您注入具有 and 的自定义 Text 组件的方法max-width，wrap例如：

<Label content={<Text warp style={{maxWidth:"50px"}}>long string </Text> } />

另一种选择是使用offset标签的属性，但它很灵活，会影响整体标签的位置，例如：

  <Label value="Pages of my website" offset={0} position="center" />