javascript - 带有 react-vis 的响应式饼图

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. 我究竟做错了什么？如何创建响应式饼图？

score 6 · Accepted Answer

我最近在这个包中的很多图表中遇到了同样的问题。我发现的一个解决方法是使用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 上方查看它，计算出高度和宽度，然后将其传递给图表。

score 2 · Accepted Answer

我可以帮忙解决这个问题，我在使用桑基图时遇到了完全相同的问题；文档使它看起来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"
      />

score 1 · Accepted Answer

我只是添加父 div和子 divdisplay: flex试试这个，我希望它会帮助你。谢谢flex: 1

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

score 1 · Accepted Answer

库似乎不支持用 FlexibleXYPlot 或 XYPlot 包装径向图（请参阅问题Responsive RadialChart "react-vis": "^1.7.7"，从未解决，我无法让它工作），在 RadialChart 图表的顶部需要放置宽度和高度。

现在基于以下问题，FlexibleXYPlot 需要高度道具，已制作 pr 来解决此问题，但从未合并。基于Alex Sandiiarov 实现，可以使用以下代码使饼图响应：

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;

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

score 0 · Accepted Answer

我可以用反应钩子做到这一点，看看它：

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

如果您可能需要它在元素内调整大小（<div>例如 a），您可能希望使用 anuseRef来引用所需元素的宽度/高度

javascript - 带有 react-vis 的响应式饼图

5 回答 5

Related

Reference