React-chartjs-2 中的半个甜甜圈

Question

使用相应的代码沙箱代码 https://codesandbox.io/s/competent-jepsen-r7n3d?file=/src/Guage.js，我能够调出圆环图。

我需要一些帮助，将其制作为半圆形甜甜圈，并将文本放置在中心以及颜色内部，如下所示。

更新:: 添加了周长: 90 * Math.PI ，旋转: 69.9 * Math.PI 使其成为半圆。仍在尝试将文本放置在图表上并将文本放置在中心

提前致谢。

Answer 1

我将分享我是如何做到这一点的

import { Doughnut } from "react-chartjs-2";
import { Chart, ArcElement } from "chart.js";

Chart.register(ArcElement);

const data = {
  datasets: [
    {
      data: [3, 10, 10, 10, 10, 10, 10, 10, 10, 10],
      backgroundColor: [
        "#336699",
        "#99CCFF",
        "#999933",
        "#666699",
        "#CC9933",
        "#006666",
        "#3399FF",
        "#993300",
        "#CCCC99",
        "#666666",
        "#FFFFFF",
        "#FFFFFF",
        "#FFFFFF"
      ],
      display: true,
      borderColor: "#D1D6DC"
    }
  ]
};

const Chart = () => {
  return (
    <div>
      <Doughnut
        data={data}
        options={{
          plugins: {
            legend: {
              display: false
            },
            tooltip: {
              enabled: false
            }
          },
          rotation: -90,
          circumference: 180,
          cutout: "60%",
          maintainAspectRatio: true,
          responsive: true
        }}
      />
      <div
        style={{
          position: "absolute",
          top: "55%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          textAlign: "center"
        }}
      >
        <div>Text Here</div>
      </div>
    </div>
  );
};

在codesandbox中查看