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

Question

我是 react-google-charts 的新手，我正在开发半馅饼甜甜圈，但尽管已经成功，但我遇到了一个问题，这个问题是 % of可见的一半馅饼只有 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%？

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

Answer 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"
              }
            }
          }}
/>

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

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

REACT: How to build a half donut

javascript

charts

reactjs

react-google-charts