Javascript 反应：如何制作半个甜甜圈

我是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;

import React，{Component}来自“React”；
从“反应谷歌图表”导入{Chart}；
类扩展组件{
建造师（道具）{
超级（道具）；
this.props=props；
此.state={
加载：false
};
}
componentDidMount（）{
这是我的国家(
{
加载：正确
},
() => {
这是我的国家({
宽度：document.querySelector（“容器”）.getBoundingClientRect（）
.宽度
});
}
);
}
render（）{
返回(
{this.state.loaded(
) : (
“卡甘多达托斯”
)}
);
}
}
module.exports.PieChart=PieChart；

正如你们所看到的，可见部分的总和只有50%，而不是100%

那么，我怎样才能使可见部分占到总量的100%呢

您可以在此处检查所有代码：

---

我们可以更改标签值，它使用的是react google图表的回调函数，如下所示。在回调函数中，我们可以访问饼图的svg

<Chart

   chartEvents={[
   {
      eventName: "ready",
      callback: ({ chartWrapper, google }) => {
          // const chart = chartWrapper.getChart();
          let svg = document.querySelector("svg");
          console.log("svg childNodes are ",svg.childNodes)

          // YOU CAN WRITE THIS CODE USING FOR EACH BUT FOR EASY UNDERSTANDING I WROTE LIKE THIS

          // first 2 children in svg are heading & label colors(sidenav)

          for(var i=3;i<svg.childNodes.length-1;i++) {
             var temp = svg.childNodes[i].childNodes[1].innerHTML;
             if(temp.length>3) {
                temp = temp.substring(0,3)
             }
             else {
                temp = temp.substring(0,2)
             }
             // doubling to make them as 100% summary
             temp = parseFloat(temp)*2;
             svg.childNodes[i].childNodes[1].innerHTML = temp+'%';


         }

       } 
       } 
 ]}


          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",
            pieHole: 0.4,
            pieStartAngle: 270,
            slices: {
              4: {
                color: "transparent"
              }
            }
          }}
/>

{
//const chart=chartWrapper.getChart（）；
让svg=document.querySelector（“svg”）；
log（“svg childNodes是”，svg.childNodes）
//您可以使用FOR EACH编写此代码，但为了便于理解，我是这样写的
//svg中的前两个子项是标题和标签颜色（sidenav）
对于（var i=3；i3）{
温度=温度子串（0,3）
}
否则{
温度=温度子串（0,2）
}
//加倍，使其成为100%的汇总
温度=浮点数（温度）*2；
svg.childNodes[i].childNodes[1].innerHTML=temp+'%'；
}
} 
} 
]}
宽度={this.state.width}
高度={“400px”}
chartType=“PieChart”
加载程序={加载图表}
data={this.props.data}
选择权={{
背景色：“透明”，
标题：“posesiones发行”，
pieHole:0.4，
皮斯塔坦格尔：270，
切片：{
4: {
颜色：“透明”
}
}
}}
/>

---

注意如果您有静态数据，那么就可以了。如果您的数据值发生变化，那么每次我们没有得到甜甜圈形状。图表不是这样工作的。

我能看到的唯一方法是，我们可以通过使用react中的REF更改dom操作来实现。意味着我们自己在片中覆盖百分比。数据是固定的还是会改变？如果你的数据再次改变，你会错过甜甜圈形状。数据是由谷歌图表计算的。我不知道如何修改标签的值