反应：如何制作半个甜甜圈答案

【问题标题】：REACT: How to build a half donut反应：如何制作半个甜甜圈
【发布时间】：2020-05-17 11:35:22
【问题描述】：

我是 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%？

你可以在这里查看所有代码：

【问题讨论】：

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

标签： javascript reactjs charts react-google-charts

【解决方案1】：

我们可以使用 react-google-chart 的回调函数来改变标签值，如下所示。在回调函数中我们可以访问饼图的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"
              }
            }
          }}
/>

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

【讨论】：