CodeHoon

chart.js 를 사용할 때, canvas의 크기(width, height)를 조절하고 싶다.

아주 간단하다.

canvas를 감싸고 있는 div 태그를 하나 만들고, div 태그에 position: relative를 적용한 뒤, width, height 를 작성하면 된다.

예시)

<div style="position: relative; height:600px; width:400px;">
        <canvas id="myCanvas" >
               Your browser does not support the canvas element
        </canvas>
</div>

그러면 변한 사이즈를 확인할 수 있다.

물론 class 등을 사용하여 css 태그로 적용할 수 있는 방법이 있다.

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>