Адаптивная круговая диаграмма с реакцией

Question

Я читаю документы на гибких графиках и пытаюсь применить их к круговой диаграмме:

import React from 'react'
import { RadialChart, FlexibleXYPlot } from 'react-vis'

const MyChart = ({data}) => (
  <div>
    <FlexibleXYPlot>
      <RadialChart
        data={data}
        colorType="literal"
      />
    </FlexibleXYPlot>
  </div>
)

Но при рендеринге я получаю разметку следующим образом:

<div>
  <div style="width: 100%; height: 100%;">
    <div class="rv-xy-plot " style="width: 0px; height: 0px;">
    </div>
  </div>
</div>

Как видите, размеры элемента rv-xy-plot явно установлены на 0px.Что я делаю неправильно?Как мне создать отзывчивую круговую диаграмму?

Answer 1

Я могу помочь с этим, у меня была точно такая же проблема с диаграммой Санки;из документации видно, что FlexibleXYPlot сделает любую диаграмму отзывчивой, но это не так.

В нижней части этой страницы указан правильный подход - https://uber.github.io/react-vis/documentation/api-reference/flexible-plots

для RadialChart вам нужно сделать это:

import { RadialChart, makeVisFlexible} from "react-vis";

const FlexRadialChart=makeVisFlexible(RadialChart)

и затем использовать новый компонент, который вы только что создали с адаптивным кодом, запеченным в:

      <FlexRadialChart
        data={data}
        colorType="literal"
      />

Answer 2

Я просто добавляю display: flex на родительский div и flex: 1 на child div Попробуйте, надеюсь, это вам поможет.Спасибо

<div>
  <div style="display: flex; width: 100%; height: 100%;">
    <div class="rv-xy-plot" style="flex: 1">
    </div>
  </div>
</div>

Answer 3

Недавно я столкнулся с той же проблемой со многими графиками из этого пакета.Обход, который я нашел, заключается в использовании React-virtualized-auto-sizer .По сути, он выполняет обтекание компонентов, для которых требуется ширина и высота, а затем передает ширину и высоту родительского контейнера (в котором находится авторазмер).Вот пример:

<div style={{height:'100%',width:'100%'}} className={"mb-4"}>
<AutoSizer>
    {({ height, width }) => (
        <RadialChart
            data={this.state.myData}
            width={width}
            height={height}
            onValueMouseOver={this.handleMouseOver}
            className={"mb-4"}
            labelsAboveChildren={true}
        />
    )}
</AutoSizer>

Таким образом, авторазмер просматривает его над внешним делителем, вычисляет высоту и ширину, а затем передает его на график.

Answer 4

Похоже, что библиотека не поддерживает обертывание радиальной диаграммы с FlexibleXYPlot или XYPlot (см. Проблему Responsive RadialChart "response-vis": "^ 1.7.7" , никогда не решается, и яне может заставить его работать), поверх этой диаграммы RadialChart требуется ширина и высота для смещения.

Теперь на основе следующих проблем FlexibleXYPlot требует высотных подпорок Для решения этой проблемы был сделан pr, но он не был объединен.Основываясь на реализации Алекса Сандиярова , следующий код может быть использован для того, чтобы сделать круговую диаграмму отзывчивой:

import React, { Component } from 'react';
import ResizeObserver from 'resize-observer-polyfill';
import { RadialChart } from 'react-vis';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            height: 0,
            width: 0
        };
    }
    componentDidMount() {
    //When mounted set our start size
    this.setSize();
    //Lets observe changes with resize-observer-polyfill
    this.observer = new ResizeObserver(entries => this.setSize());
    //Lets observe our node
        this.observer.observe(this.node);
    }

    componentWillUnmount() {
        this.observer.disconnect();
    }

    setSize = () => {
        const { height, width } = this.node.getBoundingClientRect();
        this.setState({ height, width });
  };

    render() {
        const { height, width } = this.state;
        return (
            <div
                ref={node => {
                    if (node) {
                        this.node = node;
                    }
                }}
                style={{ width: '100vw', height: '100vh' }}
            >
                <RadialChart
                    className={'donut-chart-example'}
                    getAngle={d => d.theta}
                    data={[
                        { theta: 2, className: 'custom-class' },
                        { theta: 6 },
                        { theta: 2 },
                        { theta: 3 },
                        { theta: 1 }
                    ]}
                    width={width}
                    height={height}
                    padAngle={0.04}
        colorType="literal"
                />
            </div>
        );
    }
}

export default App;

Надеюсь, это поможет вам или укажет вам полезное направление:)