React JS：Nivo饼图未显示

Question

我正在使用nivo饼图在React js中工作，我使用的是documentation中提供的确切代码，但是当我启动服务器时，该图表未呈现，并且显示空白页，没有错误在控制台和服务器终端中。

代码：

import React from 'react';
import { render } from 'react-dom'
import { ResponsivePie } from '@nivo/pie'


var data = [
    {
        "id": "rust",
        "label": "rust",
        "value": 576,
        "color": "hsl(167, 70%, 50%)"
    },
    {
        "id": "javascript",
        "label": "javascript",
        "value": 129,
        "color": "hsl(119, 70%, 50%)"
    },
    {
        "id": "java",
        "label": "java",
        "value": 422,
        "color": "hsl(253, 70%, 50%)"
    },
    {
        "id": "hack",
        "label": "hack",
        "value": 71,
        "color": "hsl(307, 70%, 50%)"
    },
    {
        "id": "erlang",
        "label": "erlang",
        "value": 354,
        "color": "hsl(187, 70%, 50%)"
    }
];
render((
    <ResponsivePie
        data={data}
        margin={{
            "top": 40,
            "right": 80,
            "bottom": 80,
            "left": 80
        }}
        innerRadius={0.5}
        padAngle={0.7}
        cornerRadius={3}
        colors="nivo"
        colorBy="id"
        borderWidth={1}
        borderColor="inherit:darker(0.2)"
        radialLabelsSkipAngle={10}
        radialLabelsTextXOffset={6}
        radialLabelsTextColor="#333333"
        radialLabelsLinkOffset={0}
        radialLabelsLinkDiagonalLength={16}
        radialLabelsLinkHorizontalLength={24}
        radialLabelsLinkStrokeWidth={1}
        radialLabelsLinkColor="inherit"
        slicesLabelsSkipAngle={10}
        slicesLabelsTextColor="#333333"
        animate={true}
        motionStiffness={90}
        motionDamping={15}
        defs={[
            {
                "id": "dots",
                "type": "patternDots",
                "background": "inherit",
                "color": "rgba(255, 255, 255, 0.3)",
                "size": 4,
                "padding": 1,
                "stagger": true
            },
            {
                "id": "lines",
                "type": "patternLines",
                "background": "inherit",
                "color": "rgba(255, 255, 255, 0.3)",
                "rotation": -45,
                "lineWidth": 6,
                "spacing": 10
            }
        ]}
        fill={[
            {
                "match": {
                    "id": "ruby"
                },
                "id": "dots"
            },
            {
                "match": {
                    "id": "c"
                },
                "id": "dots"
            },
            {
                "match": {
                    "id": "go"
                },
                "id": "dots"
            },
            {
                "match": {
                    "id": "python"
                },
                "id": "dots"
            },
            {
                "match": {
                    "id": "scala"
                },
                "id": "lines"
            },
            {
                "match": {
                    "id": "lisp"
                },
                "id": "lines"
            },
            {
                "match": {
                    "id": "elixir"
                },
                "id": "lines"
            },
            {
                "match": {
                    "id": "javascript"
                },
                "id": "lines"
            }
        ]}
        legends={[
            {
                "anchor": "bottom",
                "direction": "row",
                "translateY": 56,
                "itemWidth": 100,
                "itemHeight": 18,
                "itemTextColor": "#999",
                "symbolSize": 18,
                "symbolShape": "circle",
                "effects": [
                    {
                        "on": "hover",
                        "style": {
                            "itemTextColor": "#000"
                        }
                    }
                ]
            }
        ]}
    />
), document.getElementById('root'));

这是我第一次在React js中处理图表。 我做错了任何帮助将不胜感激。 谢谢。

Answer 1

我认为您可能忘记了设置ResponsivePie父级组件的高度。这是文档中的说明

---

使用响应组件时，请确保父容器的高度已定义，否则高度将为0并且不会显示图表

像这样：

<div style={{height: 200}}>
   <ResponsivePie .../>
</div>