Chart.js 圆环图呈现错误

Question

我正在尝试获得从 0 度到 180 度（圆的一半）的圆环图的输出以进行练习，所以我尝试了旋转选项，但它没有给我任何想要的结果.当试图通过圆周做一个圆时，它会通过改变图表的外观来犯一个奇怪的错误。要得到半个甜甜圈，我需要使用周长：60*Math.PI。这是我试过的下面的代码。我正在附加我创建的沙箱 link。

https://codesandbox.io/s/friendly-mccarthy-d443i?file=/src/App.js

`

import React from 'react';
import { Doughnut } from 'react-chartjs-2';

const data = {
  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  datasets: [
    {
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)',
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)',
      ],
      borderWidth: 1,
    },
  ],
};

const DoughnutChart = () => (
  <>
    <div className='header'>
      <h1 className='title'>Doughnut Chart</h1>
      <div className='links'>
        <a
          className='btn btn-gh'
          href='https://github.com/reactchartjs/react-chartjs-2/blob/master/example/src/charts/Doughnut.js'
        >
          Github Source
        </a>
      </div>
    </div>
    <Doughnut data={data} options={{rotation: 1*Math.PI, circumference: 1*Math.PI}} />
  </>
);

export default DoughnutChart;

Answer 1

<Doughnut data={data} options={{ rotation: 0, circumference: 180 }} />

Chart.js 圆环图呈现错误

Chart.js Doughnut Chart Rendering Wrong

reactjs

chart.js

react-chartjs

react-chartjs-2