0

我有以下代码：

<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 位置。目前图表与图例重叠，我需要根据一个比率来绘制，而不是一个硬百分比数字。

4

2 回答 2

1

这让我觉得经典的 JS + CSS 很有用。

  1. 添加id="theChart"到Pie组件。
  2. 添加id="theLegend"到Legend组件。
  3. 添加以下 CSS 项目（使用最适合您的堆栈的任何内容）：#theLegend { visibility: hidden }在初始渲染时隐藏图表。
  4. 然后，从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. 我会使用浏览器开发工具来查看它当前是如何设置的，并以相同的方式操作相同的值以获得您想要的定位。

于 2018-05-25T14:18:28.157 回答
0

实际上 ResponsiveContainer 解决了我的问题。我最初认为它不会，因为我不知道它会保持图例大小并填充饼图的其余部分。正是我需要的。我仍然希望我有办法单独跟踪这些图表，以便在需要时为图表腾出更多空间。

于 2018-05-30T16:32:55.323 回答