[ Chart.js ] javascript 를 이용하여 2가지의 차트를 한 canvas에 그려내기 | how to draw two graph in one canvas?

 

 

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는 이쁘다..ㅎㅎ