<text> 的旋转不在其位置旋转
Rotation of <text> doesn't rotate at its position
我正在尝试实现this Piechart,但我想在不旋转的情况下旋转它,然后将其文本重新旋转为水平。问题是它没有居中。我试过变换原点中心。
旋转后的样子:
我想要它的样子
这是我的代码:
const data= [
{
name: props.language == "CP",
value: 300
},
{
name: props.language == "CP",
value: 300
}
];
const RADIAN = Math.PI / 180;
const renderCustomizedLabel = ({
cx,
cy,
midAngle,
innerRadius,
outerRadius,
percent,
index,
name
}) => {
const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
const x = cx + radius * Math.cos(-midAngle * RADIAN);
const y = cy + radius * Math.sin(-midAngle * RADIAN);
console.log(cx, cy, midAngle, innerRadius, outerRadius, RADIAN, radius);
return (
<text
style={{ WebkitTransform: "rotate(90deg)", transformOrigin: "center" }}
x={x}
y={y}
fill="white"
textAnchor={x > cx ? "start" : "end"}
dominantBaseline="central"
>
{name}
</text>
);
};
<div style={{ width: "100%", height: 310 }} className="rotate">
<ResponsiveContainer>
<PieChart>
<Pie
data={data}
labelLine={false}
label={renderCustomizedLabel}
fill="#0eb89a"
dataKey="value"
/>
</PieChart>
</ResponsiveContainer>
css:
.rotate {
background-color: transparent;
transform: rotate(270deg);
margin: auto;
}
我会使用 svg transform
文本节点,而不是使用 x
和 y
属性定位它们。
const { PieChart, Pie, Sector, Cell } = Recharts;
const data = [{name: 'Group A', value: 400}, {name: 'Group B', value: 300},
{name: 'Group C', value: 300}, {name: 'Group D', value: 200}];
const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];
const RADIAN = Math.PI / 180;
const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index }) => {
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 transform={`translate(${x},${y}) rotate(45)`} fill="white" textAnchor={`middle`} dominantBaseline="central">
{`${(percent * 100).toFixed(0)}%`}
</text>
);
};
const SimplePieChart = React.createClass({
render () {
return (
<PieChart width={800} height={400} onMouseEnter={this.onPieEnter}>
<Pie
data={data}
cx={300}
cy={200}
labelLine={false}
label={renderCustomizedLabel}
outerRadius={80}
fill="#8884d8"
>
{
data.map((entry, index) => <Cell fill={COLORS[index % COLORS.length]}/>)
}
</Pie>
</PieChart>
);
}
})
ReactDOM.render(
<SimplePieChart />,
document.getElementById('container')
);
我正在尝试实现this Piechart,但我想在不旋转的情况下旋转它,然后将其文本重新旋转为水平。问题是它没有居中。我试过变换原点中心。
旋转后的样子:
我想要它的样子
这是我的代码:
const data= [
{
name: props.language == "CP",
value: 300
},
{
name: props.language == "CP",
value: 300
}
];
const RADIAN = Math.PI / 180;
const renderCustomizedLabel = ({
cx,
cy,
midAngle,
innerRadius,
outerRadius,
percent,
index,
name
}) => {
const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
const x = cx + radius * Math.cos(-midAngle * RADIAN);
const y = cy + radius * Math.sin(-midAngle * RADIAN);
console.log(cx, cy, midAngle, innerRadius, outerRadius, RADIAN, radius);
return (
<text
style={{ WebkitTransform: "rotate(90deg)", transformOrigin: "center" }}
x={x}
y={y}
fill="white"
textAnchor={x > cx ? "start" : "end"}
dominantBaseline="central"
>
{name}
</text>
);
};
<div style={{ width: "100%", height: 310 }} className="rotate">
<ResponsiveContainer>
<PieChart>
<Pie
data={data}
labelLine={false}
label={renderCustomizedLabel}
fill="#0eb89a"
dataKey="value"
/>
</PieChart>
</ResponsiveContainer>
css:
.rotate {
background-color: transparent;
transform: rotate(270deg);
margin: auto;
}
我会使用 svg transform
文本节点,而不是使用 x
和 y
属性定位它们。
const { PieChart, Pie, Sector, Cell } = Recharts;
const data = [{name: 'Group A', value: 400}, {name: 'Group B', value: 300},
{name: 'Group C', value: 300}, {name: 'Group D', value: 200}];
const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];
const RADIAN = Math.PI / 180;
const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index }) => {
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 transform={`translate(${x},${y}) rotate(45)`} fill="white" textAnchor={`middle`} dominantBaseline="central">
{`${(percent * 100).toFixed(0)}%`}
</text>
);
};
const SimplePieChart = React.createClass({
render () {
return (
<PieChart width={800} height={400} onMouseEnter={this.onPieEnter}>
<Pie
data={data}
cx={300}
cy={200}
labelLine={false}
label={renderCustomizedLabel}
outerRadius={80}
fill="#8884d8"
>
{
data.map((entry, index) => <Cell fill={COLORS[index % COLORS.length]}/>)
}
</Pie>
</PieChart>
);
}
})
ReactDOM.render(
<SimplePieChart />,
document.getElementById('container')
);