我正在尝试创建一个自定义外观的圆环图使用图表js.

当数据值彼此接近时，我的代码（fiddle）工作正常，但当尝试处理值远大于其他值的数据时，图表中断，broken fiddle

我不明白为什么会发生这种情况，我认为这与弧间距和半径有关，但我不知道如何处理它，并仍然使其看起来像我所需要的
代码

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.8.0/dist/chart.js"></script>
<canvas id="myChart" width="200" height="200"></canvas>

let color1 = '#98A3CC';
let color2 = '#6475B2';
let hoverColor="#283F94";
var options = {
  type: 'doughnut',
  data: {
    labels: ["One", "Two", "Three", "Four"],
    datasets: [{
      label: '# of Votes',
      data: [3956745.7,5400,4086.06,50000],
      backgroundColor: [
      color1, color2, color1, color2],
      hoverBackgroundColor: new Array(4).fill(hoverColor),
    }]
  },
  options: {
    cutout: '90%',
    radius: '90%',
    //hover: {mode: null},
    plugins: {
      legend: {
        display: false
      }
    },
    elements: {
      arc: {
        spacing: -50,
        borderRadius: 15
      }
    }
  }
}
var chartInstance = new Chart(document.getElementById("myChart"), options);