1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
import React from 'react';
import PropTypes from 'prop-types';
import {
PieChart,
Pie,
Cell
} from 'recharts';
import { purple, red, pink, indigo, blue, cyan, teal } from '@material-ui/core/colors';
import { data6 } from './sampleData';
const colors = [red[500], pink[500], purple[500], indigo[500], blue[500], cyan[500], teal[500]];
const RADIAN = Math.PI / 180;
const renderCustomizedLabel = ({
cx,
cy,
midAngle,
innerRadius,
outerRadius,
percent,
}) => {
const radius = innerRadius + ((outerRadius - innerRadius) * 0.5);
const x = cx + (radius * Math.cos(-midAngle * RADIAN));
const y = cy + (radius * Math.sin(-midAngle * RADIAN));
return (
<text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline="central">
{`${(percent * 100).toFixed(0)}%`}
</text>
);
};
renderCustomizedLabel.propTypes = {
cx: PropTypes.number,
cy: PropTypes.number,
midAngle: PropTypes.number,
innerRadius: PropTypes.number,
outerRadius: PropTypes.number,
percent: PropTypes.number,
};
renderCustomizedLabel.defaultProps = {
cx: 0,
cy: 0,
midAngle: 0,
innerRadius: 0,
outerRadius: 0,
percent: 0,
};
class PieCustomLabel extends React.Component {
render() {
return (
<PieChart
width={800}
height={450}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5
}}
>
<Pie
dataKey="value"
data={data6}
cx={300}
cy={200}
labelLine={false}
label={renderCustomizedLabel}
outerRadius={160}
fill="#8884d8"
>
{
data6.map((entry, index) => <Cell fill={colors[index % colors.length]} key={index.toString()} />)
}
</Pie>
</PieChart>
);
}
}
export default PieCustomLabel;
|
