Изменение процентного соотношения в зависимости от высоты легенды - PullRequest
Новая
       9

Изменение процентного соотношения в зависимости от высоты легенды

0 голосов
/ 24 мая 2018

У меня есть следующий код: 

<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 на диаграмме в зависимости от высоты или количества линий, которые занимает легенда.В настоящее время диаграмма пересекается с легендой, и мне нужно рисовать на основе отношения, а не жесткого процентного числа.

Ответы [ 2 ]

0 голосов
/ 30 мая 2018

На самом деле ResponsiveContainer исправил мою проблему.Сначала я думал, что это не так, потому что я не знал, что он сохранит размер легенды и заполнит остальную часть круговой диаграммы.Именно то, что мне было нужно.Мне все еще хотелось, чтобы у меня был способ отследить их отдельно, чтобы я мог выделить больше места для графиков, если это необходимо.

0 голосов
/ 25 мая 2018

Мне кажется, это хорошее применение для классического JS + CSS.

  1. Добавление id="theChart" к компоненту Pie.
  2. Добавление id="theLegend" к Legend component.
  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.Я бы использовал инструменты разработчика браузера, чтобы увидеть, как он в настоящее время устанавливается, и манипулировать тем же значением таким же образом, чтобы получить желаемое позиционирование.

...