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 기반의 Chart.js를 이용하여 한 캔버스(canvas)내에 2개 이상의 그래프를 그리려고 한다.

꺾은선(line)과, 바(bar) 두 가지 형태이다.

데이터는 axios를 이용하여 json 형태로 받아왔다.

음... 대충 아래와 같긴 한데,, 보기가 너무 불편하고 그러니, 요점만 작성하도록 하겠다.

■ 1. 데이터를 이루는 부분

■ 2. chart.js 호출

이렇게 호출 시, canvas 가 동작한다.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="generalWithExposeList"></canvas>
 
<script>
  .then(function(response) {
        labelsAndDatas(responseData1, response.data)
    })

function labelsAndDatas (responseData1, responseData2) {
  let labels = []
  let labelValues = []
  let labels2 = []
  let labelValues2 = []
console.log(responseData1)
  for(i=0; i<responseData1.length; i++){    // 생산량 리스트 : 날짜, 생산량 출력
      labels.unshift(responseData1[i].day.substr(5))
      labelValues.unshift(responseData1[i].day_total)
      }
      console.log(labels)
      console.log(labelValues)

  for(i=0; i<responseData2.length; i++){    // 출하 리스트 : 출하량 출력
      labels2.push(responseData2[i].day.substr(5))
      labelValues2.push(responseData2[i].day_total)
      }   
      console.log(labels2)
      console.log(labelValues2)

  drawChart (labels, labelValues, labelValues2)   // 호출
}

function drawChart (labels, labelValues, labelValues2) {
  let data = {
    labels: labels,
    datasets: [
    {
      type: 'line',
      yAxesID: 't',
      label: '일자별 생산량',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data : labelValues
    },
    {
      type: 'bar',
      label: '일자별 출하량',
      backgroundColor: 'rgb(54, 162, 235)',
      borderColor: 'rgb(54, 162, 235)',
      data : labelValues2
    }
    ]}

    const generalWithExposeListConfig = {
      data: data,
      options: {}
    }

    const generalWithExposeList = new Chart(
      document.getElementById('generalWithExposeList'),
      generalWithExposeListConfig
    );
}function labelsAndDatas (responseData1, responseData2) {
  let labels = []
  let labelValues = []
  let labels2 = []
  let labelValues2 = []
console.log(responseData1)
  for(i=0; i<responseData1.length; i++){    // 생산량 리스트 : 날짜, 생산량 출력
      labels.unshift(responseData1[i].day.substr(5))
      labelValues.unshift(responseData1[i].day_total)
      }
      console.log(labels)
      console.log(labelValues)

  for(i=0; i<responseData2.length; i++){    // 출하 리스트 : 출하량 출력
      labels2.push(responseData2[i].day.substr(5))
      labelValues2.push(responseData2[i].day_total)
      }   
      console.log(labels2)
      console.log(labelValues2)

  drawChart (labels, labelValues, labelValues2)   // 호출
}

function drawChart (labels, labelValues, labelValues2) {
  let data = {
    labels: labels,
    datasets: [
    {
      type: 'line',
      yAxesID: 't',
      label: '일자별 생산량',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data : labelValues
    },
    {
      type: 'bar',
      label: '일자별 출하량',
      backgroundColor: 'rgb(54, 162, 235)',
      borderColor: 'rgb(54, 162, 235)',
      data : labelValues2
    }
    ]}

    const generalWithExposeListConfig = {
      data: data,
      options: {}
    }

    const generalWithExposeList = new Chart(
      document.getElementById('generalWithExposeList'),
      generalWithExposeListConfig
    );
}
</script>

chart.js는 이쁘다..ㅎㅎ

비동기 통신(AJAX, AXIOS)를 통해 데이터를 받아오고, 해당 데이터를 2회 매개 변수로 전달해주는 과정에서 데이터가 정순 -> 역순으로 변하였다.
그리고 데이터를 배열에 삽입 해주어야한다.

그래서 해당 데이터를 다시 정순으로 돌리려고 생각하다, 굳이 그럴 필요가 없다 느끼고, 
반복문을 이용해서 루프가 돌 때마다 배열의 앞에 넣어주도록 하였다.

■ 배열의 앞에 요소를 넣는 법

unshift()

예시)

ArrayData = [ ]
for(i=0; i<responseData1.length; i++){
    ArrayData.unshift(responseData1[i].ColumName)   //배열에 json타입의 값을 앞에 집어넣기
 }
console.log(ArrayData)

■ 배열의 뒤에 요소를 넣는 법

ArrayData = [ ]
for(i=0; i<responseData2.length; i++){    
      ArrayData.push(responseData2[i].day_total)  //배열에 json타입의 값을 뒤에 집어넣기
}   
console.log(ArrayData)

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>

JavaScript 비통기 통신(Ajax, Axios 등)으로 PHP에서 송신한 json 데이터를 수신하여 콘솔에 찍어보는 작업을 하도록 하겠습니다.

1. 비동기 통신
2. PHP 송신
3. Javascript 수신 및 출력

■ 1. 비동기 통신

비동기 통신에는 여러 종류가 있지만 이 중에서 axios를 사용

Axios CDN 을 사용하였다. (편하게)

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
getData() // 함수 호출

function getData () { 
  axios.get("api주소")	
    .then(function(response) {
      console.log(response)
    })
    .catch(function(error) {
      console.log(error)
    })
}
</script>

get method로 api 주소를 호출한 모습이다.

성공시 "200" 성공과 함께 response가 출력된다. (지금 바로 하면 404에러가 뜰겁니다.)

■ 2. PHP 데이터 송신

그 다음으로 PHP에서 데이터를 출력하여 echo 해주면 된다.

<?php
// mysql connection 생략

$result = mysqli_query($con, $sql) or die('query error');

while($row = mysqli_fetch_assoc($result)){
    $data_array[] = ($row);
}

$result = json_encode($data_array);
echo $result;

- 짧은 설명 -

php와 database(DB) mysql 에서 데이터를 출력한 문구
(특별한 프레임워크를 사용하고 있지 않다.)

while문을 통해 출력한 데이터를 $data_array[] 배열에 반복문을 통하여 삽입,
json 형태 { key: value }  로 바꿔주어 출력.

[ mysql 를 조금 참고하자면, column명 : data 인 셈이다. ]
[ key : value ]

- 짧은 설명 끝 - 

■ 3. Javascript 수신 및 출력

아까 위에서 axios.get( ) 안의 내용입니다. then()의 코드

<script>
.then(function(response) {
      console.log(response)
      response = JSON.stringify(response.data)
      labelsAndDatas(response)
    })

결과값에 에러가 없다면,
해당 response를 JSON.stringify(response.data) 를 통해 문자열로 변환 중요★
labelsAndDatas( ) 함수로 데이터를 전송

<script>

function labelsAndDatas (result) {
  console.log(result)
}
</script>

labelsAndDatas 함수에서 response.data 를 result 로 받아와 콘솔창에 찍어준 모습

이제 이 함수 내에서 원하는 작업을 하면 된다. 

key: value로  보았을 때,  { '날짜' : '값', '총량' : '값'  } 을 확인할 수 있다.

● 바닐라 자바스크립트로
● 요소를 자식요소 맨 마지막에 추가를 한 뒤
● 3초 뒤에 자동으로 사라지게 하기 예제 입니다.

<html>
  <div class="div">
     <input type="text" />
     <!-- 이곳에 생성할 예정 -->
  </div>
</html>

<script>
function createErrorCodeElement () {	// error-log 라는 클래스 생성 및 스타일 지정
    let newP = document.createElement('p')
    const tiv = document.querySelector('.div')
    tiv.appendChild(newP)
    newP.classList.add('error-log')
    newP.innerHTML = '유효한 내용을 입력해주세요'
    newP.style.color = 'red'
    newP.style.fontSize = '12px'
    RemoveErrorCodeElement()   // 끝난 뒤 함수 호출
}

function RemoveErrorCodeElement () {   // 3초 뒤 엘리먼트 삭제
    setTimeout(function () {	// 인스턴스 함수로 설정
        let errorLogElement = document.querySelector('.error-log') 
        if ( errorLogElement )
       		errorLogElement.remove()
    }, 3000)	// 시간 설정
}
</script>

해석해보자면, p 태그를 div 태그 내에 특정 이벤트로 지정해놓고( onsubmit 의 조건 같은 걸로 ), 

해당 이벤트 함수가 호출되었다면 CreateErrorCodeElement가 실행되어 요소를 생성한 뒤,

RemoveErrorCodeElement가 호출되어 3초로 설정된 setTimeout() 를 통해 인스턴스 함수로 생성한 요소를 제거 하는 겁니다.

☆ 저는 이 방법이 무한하게 반복 될 줄 알았건만, 안되더군요. 
     그래서 할 수 없이 미리 style을 지정해놓고 조건에 따라 className을 변경하는 것으로 변경하려고 합니다.

다양한 오늘의 날짜를 출력하는 방법 중에서

20211122 의 포맷을 출력하는 방법

함수로 선언하기

function getTodayDate () {
            const todayDate = new Date()
            const year = todayDate.getFullYear()
            const months = todayDate.getMonth()+1
            const days = todayDate.getDate()
            const resultDate = year + '' + months + '' + days
            return resultDate
        }

// resultDate의 값이 반환됩니다.
getTodayDate()

그냥 선언하기

const todayDate = new Date()
const year = todayDate.getFullYear()
const months = todayDate.getMonth()+1
const days = todayDate.getDate()
const resultDate = year + '' + months + '' + days

//아래 결과 : 20211122
console.log(resultDate)

안녕하세요 상훈입니다.

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

Vue.js , API, Fetch(), 비동기 통신 간에 에러가 발생하였습니다. 

이 에러가 처음에는 제가 오타를 내서 발생한 에러인줄 알았으나(근데 오타도 있었음), 

오타의 문제가 아니었습니다.

1. F12 -> Network 를 확인해주세요.

2. api를 가져올 때 주소를 잘못 작성한 것을 저는 확인하였습니다. 

그리고 다시 url_base를 사용하니 원활히 출력되었습니다!

주소 주의하세욤..

이상입니다.

참고