React js：Nivo饼图未显示答案

【问题标题】：React js: Nivo Pie chart not showing upReact js：Nivo饼图未显示
【发布时间】：2018-10-18 11:01:21
【问题描述】：

我正在使用 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 中处理图表。我做错了什么任何帮助将不胜感激。谢谢。

【问题讨论】：

标签： reactjs charts pie-chart

【解决方案1】：

我想你可能忘记设置 ResponsivePie 的父组件的高度。这是文档中的解释

在使用响应式组件时，确保父容器有定义的高度，否则高度为0，不会渲染图表

像这样：

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

【讨论】：

感谢您的帮助。我忘记了