如何删除半圆形图表周围不必要的空间Chart.js图表

Question

我想删除两个甜甜圈图表之间的空间，以便它们可以相互接触。

请注意，图表画布的宽度大于甜甜圈。看起来像帆布一直使用全尺寸甜甜圈的宽度。如何删除画布内的填充，以使画布具有与图表相同的宽度？

the image highlights the canvas

  <div id="containter">
    <div id="canvas-holder" style="width:40%">
        <canvas id="chart-area" />
    </div>
    <div id="canvas-holder-2" style="width:40%">
        <canvas id="chart-area-2" />
    </div>
  </div>

https://jsfiddle.net/chan24092005/d128ks5q/3/

Answer 1

您可以使用padding属性将甜甜圈彼此“推”。

对于左甜甜圈：

options: {
    legend: {
        display: false
    },
    circumference:1 * Math.PI,
    rotation: -1.5 * Math.PI,
    layout: {
        padding: {
            left: 150
        }
    }
}

对于正确的甜甜圈：

options: {
    legend: {
        display: false
    },
    circumference:1 * Math.PI,
    rotation: -0.5 * Math.PI,
    layout: {
        padding: {
            right: 150
        }
    }
}

结果：

JSFiddle