使用react-vis的响应式饼图

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

我最近在这个包中的许多图表中遇到了同样的问题。我发现的一个变通方法是使用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>

​

因此，autosizer在外部div上查看它，计算出高度和宽度，然后将其传递给图表。

Answer 2

我可以提供帮助，我在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 3

就这一点而言，这个库似乎不支持用FlexibleXYPlot或XYPlot包装径向图表(请参阅问题Responsive RadialChart "react-vis": "^1.7.7"，从未解决过，我也无法让它工作)，在RadialChart图表顶部需要设置宽度和高度。

​

现在，基于以下问题，FlexibleXYPlot requires height props创建了一个pr来解决这个问题，但从未合并过。基于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;

希望这篇文章能对你有所帮助，或者给你指明一个有用的方向:)