JavaScript

[#. JavaScript] chart.js doughnut(donut) chart 원형 차트 생성, 사용하기

shab 2020. 11. 24. 17:44
반응형

 

 

 

 

 

도넛 모양 원형 차트를 만들려고 합니다

chart.js를 사용하겠습니다

 

 

 

www.chartjs.org/

 

Chart.js | Open source HTML5 Charts for your website

New in 2.0 New chart axis types Plot complex, sparse datasets on date time, logarithmic or even entirely custom scales with ease.

www.chartjs.org

 

사이트로 들어가면 설치부터 사용 방법, 사용 가능한 옵션들까지 상세하게 정의되어 있다

 

 

 

npm, Bower, CDN 등 여러 가지 방법으로 설치하거나 가져와서 사용할 수 있다

나는 CDN으로 가져와서 사용했다

 

 

 

① CDN으로 chart.js 사용 

<head>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
</head>

 

 

 

② chart 영역 생성

<body>
   <canvas id="myChart" width="300" height="186"></canvas>
</body>

 

 

 

③ 가장 기본적인 chart 생성

var myChart = new Chart(ctx, {
  type: 'doughnut',
    data: {
      datasets: [{
        data: [40, 60],      // 섭취량, 총급여량 - 섭취량
        backgroundColor: [
          '#9DCEFF',
          '#F2F3F6'
        ],
        borderWidth: 0,
        scaleBeginAtZero: true,
      }
    ]
  },
});

 

 

 

 

기본적으로 chart가 그려지는 animation이 적용돼 있다

이후에 원형 차트 중간에 text 넣기, chart 배경색을 그라데이션으로 넣기,

chart 끝부분을 round로 동그랗게 바꾸기, animation 시간 설정하기, 

그리고 chart 선 끝부분에 image 혹은 icon 넣기

코드에 대해 작성할 것이다

 

 

 

 

 

반응형