Question

我正在阅读the docs on flexible charts，并尝试将其应用于饼图：

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或XYPlot包装径向图（请参阅问题Responsive RadialChart "react-vis": "^1.7.7"，从未解决，我无法使其正常工作），该RadialChart图表的顶部需要要坐的宽度和高度。

现在基于以下问题FlexibleXYPlot requires height props，进行了公关以解决此问题，但从未合并。基于Alex Sandiiarov implementation，以下代码可用于使饼图具有响应性：

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;

希望这可以帮助您或为您指明有用的方向：）

Answer 2

我只是在父div 上添加display: flex，并在子div 上添加flex: 1，我希望可以为您提供帮助。谢谢

<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>

因此，自动尺寸调整器正在外部div上方看，计算出高度和宽度，然后将其传递给图表。

Answer 4

我可以帮上忙，我在Sankey图表上遇到了完全相同的问题；该文档使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 5

我能够用react钩子做到这一点，看看它：

https://codesandbox.io/s/responsive-pie-chart-react-vis-ogor6

如果您可能需要在元素中调整尺寸（例如<div>），则可能需要使用useRef来引用所需元素的宽度/高度

响应式饼图

5 个答案: