html - ChartJS "half donut"图表显示不正确

Question

我的图表显示不正确，下面是它的显示方式和假定的显示方式:

显示方式:

它的样子:

我的html代码:

<div style="display:block; width: 400px; height: 400px">
    <canvas id="dashboardChart" width="400" height="400"></canvas>
</div>

我的 typescript 组件代码:

var data = {
      datasets: [{
        data: [10, 20, 30]
      }],
      labels: [
        'Red',
        'Yellow',
        'Blue'
      ]
    };

    var ctx = document.getElementById("dashboardChart") as HTMLCanvasElement;
    var myDoughnutChart = new Chart(ctx, {
      type: 'doughnut',
      data: data,
      options: {
        rotation: 1 * Math.PI,
        circumference: 1 * Math.PI
      }
    });

如果有人能提供帮助，将不胜感激。

Answer 1

Doughnut rotation option is now in degrees

试试这些改变:

circumference: 180,
rotation: -90,

迁移 docs