我正在使用nivo图表库,正在努力使我的饼图得以呈现。我真的不明白为什么没有显示饼图。
这是仪表板的核心组件代码:
import React, { useState, useEffect } from "react";
import Amplify, { Storage } from "aws-amplify";
import Paper from "@material-ui/core/Paper";
import Box from "@material-ui/core/Box";
import Grid from "@material-ui/core/Grid";
import awsmobile from "./aws-exports";
import * as d3 from "d3";
import CircularProgress from "@material-ui/core/CircularProgress";
import MyResponsivePie from "./pieConfig";
import useStyles from "./useStyles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import IconButton from "@material-ui/core/IconButton";
import CloudDownloadIcon from "@material-ui/icons/CloudDownload";
import Typography from "@material-ui/core/Typography";
Amplify.configure(awsmobile);
Storage.configure({ level: "private" });
export default function Dashboard() {
useEffect(() => {
getFile();
}, []);
const classes = useStyles();
const [dashboard, showDashboard] = useState(false);
const [dashboardfile, setFile] = useState();
const getFile = async () => {
const url = await get_url().catch(err => getFile());
const file = await d3.csv(url);
if (file) {
console.log(file);
setFile(file);
showDashboard(true);
}
};
const get_url = () => {
var url = Storage.get("output.csv", { level: "private" }, { expires: 60 });
console.log(url);
return url;
};
const countColumnValues = (file, column) => {
var data_count = d3
.nest()
.key(function(d) {
return d[column];
})
.rollup(function(leaves) {
return leaves.length;
})
.entries(file);
console.log(data_count);
return data_count;
};
const generatePie = (file, column) => {
var data = countColumnValues(file, column);
return data;
};
return (
<Box className={classes.root}>
<AppBar position="static">
<Toolbar>
<IconButton
edge="start"
className={classes.menuButton}
color="inherit"
>
<CloudDownloadIcon onClick={get_url}></CloudDownloadIcon>
</IconButton>
<Typography variant="h6" className={classes.title}>
Atreides Controls NLP Dashboard
</Typography>
</Toolbar>
</AppBar>
{dashboard === false && (
<div className={classes.circle}>
<CircularProgress />
</div>
)}
{dashboard && (
<div className={classes.root}>
<Grid container direction="row" space={3}>
<Grid item xs>
<Paper className={classes.paper}>
<div className={classes.pie}>
<MyResponsivePie
id="contains_who_pie"
data={generatePie(dashboardfile, "contains_whos")}
/>{" "}
</div>
</Paper>
</Grid>
<Grid item xs>
<Paper className={classes.paper}>
<div className={classes.pie}>
<MyResponsivePie
id="contains_what_pie"
data={generatePie(dashboardfile, "contains_whats")}
/>
</div>
</Paper>
</Grid>
<Grid item xs>
<Paper className={classes.paper}>
<div className={classes.pie}>
<MyResponsivePie
id="contains_how_pie"
data={generatePie(dashboardfile, "contains_hows")}
/>
</div>
</Paper>
</Grid>
</Grid>
<Grid container direction="row" space={3}>
<Grid item xs>
<Paper className={classes.paper}>
<div className={classes.pie}>
<MyResponsivePie
id="multiple_who_pie"
data={generatePie(dashboardfile, "multiple_whos")}
/>
</div>
</Paper>
</Grid>
<Grid item xs>
<Paper className={classes.paper}>
<div className={classes.pie}>
<MyResponsivePie
id="multiple_what_pie"
data={generatePie(dashboardfile, "multiple_whats")}
/>{" "}
</div>
</Paper>
</Grid>
<Grid item xs>
<Paper className={classes.paper}>
<div className={classes.pie}>
<MyResponsivePie
id="multiple_how_pie"
data={generatePie(dashboardfile, "multiple_hows")}
/>
</div>
</Paper>
</Grid>
</Grid>
<Grid container direction="row" space={3}>
<Grid item xs>
<Paper className={classes.paper}>
<div className={classes.pie}>
<MyResponsivePie
id="risk_relevance_pie"
data={generatePie(
dashboardfile,
"control_relevance_to_risk"
)}
/>
</div>
</Paper>
</Grid>
<Grid item xs>
<Paper className={classes.paper}>
<div className={classes.pie}>
<MyResponsivePie
id="automated_manual_pie"
data={generatePie(dashboardfile, "")}
/>
</div>
</Paper>
</Grid>
<Grid item xs>
<Paper className={classes.paper}>
<div className={classes.pie}>
<MyResponsivePie
id="preventative_detective_pie"
data={generatePie(dashboardfile, "")}
/>
</div>
</Paper>
</Grid>
</Grid>
</div>
)}
</Box>
);
}
使用要导入的此组件配置饼图组件:
import React from "react";
import { ResponsivePie } from "@nivo/pie";
const MyResponsivePie = ({ data }) => (
<ResponsivePie
data={data}
margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
startAngle={-180}
innerRadius={0.5}
padAngle={0.7}
cornerRadius={3}
colors={{ scheme: "nivo" }}
borderWidth={1}
borderColor={{ theme: "grid.line.stroke" }}
radialLabelsSkipAngle={10}
radialLabelsTextXOffset={6}
radialLabelsTextColor="#333333"
radialLabelsLinkOffset={0}
radialLabelsLinkDiagonalLength={16}
radialLabelsLinkHorizontalLength={24}
radialLabelsLinkStrokeWidth={3}
radialLabelsLinkColor={{ from: "color", modifiers: [] }}
slicesLabelsSkipAngle={10}
slicesLabelsTextColor="#333333"
animate={true}
motionStiffness={90}
motionDamping={15}
legends={[
{
anchor: "bottom",
direction: "row",
translateY: 56,
itemWidth: 100,
itemHeight: 18,
itemTextColor: "#999",
symbolSize: 18,
symbolShape: "circle",
effects: [
{
on: "hover",
style: {
itemTextColor: "#000"
}
}
]
}
]}
/>
);
export default MyResponsivePie;
我的样式文件看起来像这样
import { green } from "@material-ui/core/colors";
import { makeStyles } from "@material-ui/core/styles";
import { forceCenter } from "d3";
const useStyles = makeStyles(theme => ({
root: {
height: "100vh"
},
success: {
backgroundColor: green[600]
},
error: {
backgroundColor: theme.palette.error.dark
},
icon: {
fontSize: 20
},
iconVariant: {
opacity: 0.9,
marginRight: theme.spacing(1)
},
message: {
display: "flex",
alignItems: "center"
},
image: {
backgroundImage: "url(https://source.unsplash.com/8WFnEehJWso)",
backgroundRepeat: "no-repeat",
backgroundColor:
theme.palette.type === "dark"
? theme.palette.grey[900]
: theme.palette.grey[50],
backgroundSize: "cover",
backgroundPosition: "center"
},
paper: {
margin: theme.spacing(1.5, 3),
display: "flex",
flexDirection: "column",
alignItems: "center"
},
form: {
width: "100%", // Fix IE 11 issue.
marginTop: theme.spacing(1)
},
submit: {
margin: theme.spacing(3, 0, 2)
},
card: {
maxWidth: 600
},
media: {
height: 500
},
circle: {
display: "flex",
"& > * + *": {
marginLeft: theme.spacing(2)
}
},
menuButton: {
marginRight: theme.spacing(2)
},
title: {
flexGrow: 1,
alignContent: "center"
},
pie: {
height: 250
}
}));
export default useStyles;
最后一个示例是我的数据从generate pie函数返回的:
[
{key: "True", value: 7981},
{key: "False", value: 950}
]
答案 0 :(得分:0)
我遇到的问题很愚蠢,容器对象没有指定的大小。