ChartJS - 파이 차트 주위의 빈 공간을 제거 할 수있는 방법이 있습니까?

Question

왼쪽과 오른쪽에 원하지 않는 간격이있는 차트를 다루고 있습니다. 나는 그것을 행운으로 없애려고 노력하고 있었고, 지금 무엇을해야할지 모르겠습니다. 나는이 문서를 철저히 읽었지만 해결책을 찾을 수없는 것 같습니다. 가능한가요? 더 많은 정보가 필요한지 알려 주시면 제공하겠습니다.

편집 :

<div> 
<canvas id="chart-gender"></canvas> 
</div> 


<script> 
var gender_data = [10, 35]; 

var graph_gender_preset = { 
    labels: ["Female", "Male"], 
    datasets: [ 
     { 
      data: gender_data, 
      backgroundColor: ["#0fa0e3", "#ff3549"] 
     } 
    ] 
}; 

var ctx3 = $("#chart-gender"); 

var chart_gender = new Chart(ctx3, { 
type: 'doughnut', 
data: graph_gender_preset, 
options: { 
     responsive: true, 
     title: { 
      display: false, 
      position: "top", 
      fontStyle: "bold", 
      fontSize: 0, 
      fullWidth: false, 
      padding: 0 
     }, 
     legend: { 
      display: false, 
      position: "top", 
      fullWidth: false, 
      labels: { display: false, usePointStyle: true, fontSize: 15, fontStyle: "bold" } 

     } 
    } 
}); 
</script> 

Answer 1

문제는 도넛되지는 그것이 사용되는 캔버스입니다.

도넛은 2 차 상자를 사용해야하며, 그렇지 않으면 줄임표처럼 보입니다. 따라서 캔버스의 크기를 변경하고 이차 크기로 만들면 더 이상 테두리가 생기지 않습니다.

여기는 JS Fiddle example입니다.

<table border="1"> 
    <tr> 
    <td> 
     First 
    </td> 
    <td> 
     <canvas width="100%" height="100%" id="myChart"></canvas> 
    </td> 
    <td> 
     Third 
    </td> 
    </tr> 
</table>