我是 react-google-charts 的新手,我正在开发一个半馅饼甜甜圈,但尽管成功了,但我遇到了一个问题,这个问题是可见半馅饼的百分比总和只有 50%,因为其他 50% 被隐藏。
我怎样才能使那个可见的部分是 100%?
这里你有图表的代码:
import React, { Component } from "react";
import { Chart } from "react-google-charts";
class PieChart extends Component {
constructor(props) {
super(props);
this.props = props;
this.state = {
loaded: false
};
}
componentDidMount() {
this.setState(
{
loaded: true
},
() => {
this.setState({
width: document.querySelector("#container").getBoundingClientRect()
.width
});
}
);
}
render() {
return (
<div>
{this.state.loaded ? (
<div id="container">
<Chart
width={this.state.width}
height={"400px"}
chartType="PieChart"
loader={<div>Loading Chart</div>}
data={this.props.data}
options={{
backgroundColor: "transparent",
title: "Distribución de posesiones",
// Just add this option
pieHole: 0.4,
pieStartAngle: 270,
slices: {
4: {
color: "transparent"
}
}
}}
/>
</div>
) : (
"Cargando datos"
)}
</div>
);
}
}
module.exports.PieChart = PieChart;
如您所见,可见部分的总和仅为 50% 而不是 100%。
那么,我怎样才能使可见部分占总数的 100%?
您可以在此处查看所有代码: