Question

我有以下代码：

<PieChart width={w} height={h} style={{fontSize:font}}>
    <Pie label={false} labelLine={false} legendType="circle" data={this.getEthnicityValues()} dataKey="total" paddingAngle={1} minAngle={1}
            nameKey="Ethnicity" cx="50%" cy="30%" outerRadius={rad}>
        {
            this.getEthnicityValues().map((entry, index) => (
                <Cell key={`cell-${index}`} fill={this.colors[index]}/>
            ))
        }
    </Pie>
    <Tooltip/>
    <Legend/>
</PieChart>)

我正在尝试根据图例占据的线条的高度或数量来更改图表的cy位置。目前图表与图例重叠，我需要根据比率绘制，而不是硬比例。

Answer 1

这对我来说非常适合经典的JS + CSS。

将id="theChart"添加到Pie组件。
将id="theLegend"添加到Legend组件。
添加以下CSS项目（使用最适合您的堆栈的任何内容）：#theLegend { visibility: hidden }在初始渲染时隐藏图表。
然后，从componentDidMount（如有必要，componentDidUpdate）调用定位功能。

例如：

figureChartPosition() {
  const legHeight = gotComputedStyle(document.getElementById('theLegend')).height;
  const chart = document.getElementById('theChart');
  const yPos = ... do some calculation ...
  chart.style.top = yPos;
  chart.style.visibility = 'visible';
}

以上是指南。我不知道定位目前是如何工作的，因此操纵top以外的其他东西可能是有意义的。我将使用浏览器开发工具来查看当前的设置，并以相同的方式操作相同的值以获得所需的定位。

Answer 2

实际上，ResponsiveContainer解决了我的问题。我原本以为它不会因为我不知道它会保留你的传奇大小并填写饼图的其余部分。正是我需要的。我仍然希望我有办法跟踪这些独立的内容，以便在需要时为图表腾出更多空间。

根据Legend高度更改cy百分比

2 个答案: