chartjs-render-monitor / chart.js 도넛 굵기 조절하기

부트스트랩에서 가져온 chart.js 도넛 그래프 입니다.

 

간단하게 js에서 cutoutPercentage값을 바꾸면 됩니다.

 

 

cutoutPercentage가 80일떼

 

 

 

 

cutoutPercentage가 40일때

 

 

cutoutPercentage가 0일때의 모습입니다.

 

 

최종 소스입니다.

 

<script>

  var sum = Number("{{sum}}");

  // Pie Chart Example
  var ctx = document.getElementById("myPieChart");
  var myPieChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ["Direct", "Referral", "Social"],
      datasets: [{
        data: [sum, 50, 20],
        backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc'],
        hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf'],
        hoverBorderColor: "rgba(234, 236, 244, 1)",
      }],
    },
    options: {
      maintainAspectRatio: false,
      tooltips: {
        backgroundColor: "rgb(255,255,255)",
        bodyFontColor: "#858796",
        borderColor: '#dddfeb',
        borderWidth: 1,
        xPadding: 15,
        yPadding: 15,
        displayColors: false,
        caretPadding: 10,
      },
      legend: {
        display: false
      },
      cutoutPercentage: 0,
    },
  });

</script>

 

저같은 경우에는 django에서 sum이라는 데이터를 받아 그래프에 넣어주었습니다.