[ JavaScript ] Chart.js 사용 예시

 

 

Javascript로 axios를 통해서 RESTful API로 받은 데이터를 Chart.js를 이용해 웹에 출력하려고 한다.

구현하고자하는 내용은 가장 기본적은 꺽은선(line) 그래프이며, type 변경을 통해서 해당 내용을 바로 변경할 수 있다.

 

일단 비동기 통신(axios)을 통해 성공했을 경우를 가정,

then() 

<script>
.then(function(response) {
      labelsAndDatas(response.data)
    })

<script>
function labelsAndDatas (responseData) {
  let labels = []
  let labelValues = []
  for(i=0; i<responseData.length; i++){
      labels.push(responseData[i].day.substr(5))
      labelValues.push(responseData[i].day_total)
      }
   console.log(labels)  // 일자별 key, value
   console.log(labelValues)   // 데이터별 key, value
  
  let data = {
    labels: labels,
    datasets: [{
      yAxesID: 't',
      label: '일자별 생산량',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data : labelValues
    }]
  };

  const config = {
    type: 'line',
    data: data,
    options: {}
  };

  const myChart = new Chart(
      document.getElementById('myChart'),
      config
    );
    </script>

 

콘솔창에 출력한 내용

 

결과 출력