카테고리

질문 & 답변
세부 분야

풀스택
해결 여부

해결됨

router to router 데이터 전송 질문

21.12.01 15:43 작성 조회수 170

안녕하세요.

router를 통해 json 형태로 시간 데이터를 가져 왔는데,

다른 router에서 이 데이터를 사용하려면 어떻게 해야 할까요 ???

[리뉴얼] Node.js 교과서 - 기본부터 프로젝트 실습까지

답변 1

답변을 작성해보세요.

조현영

지식공유자

2021.12.01

처음부터 /productBarChart 라우터로 보내세요. redirect하면서 쿼리스트링으로 데이터를 보내는 방법도 있긴 한데 추천드리지는 않습니다.

윤혁

질문자

2021.12.01

음 저 데이터를 보내야 하는 라우터가 여러개인데, 쿼리스트링으로 보내는 방법을 채택해야 할까요 ?

조현영

지식공유자

2021.12.01

라우터마다 전부다 저렇게 받으시면 됩니다. 왜 한번에 안 받으시나요?

윤혁

질문자

2021.12.02

음 라우터 마다 받게 되면, 쿼리를 두번씩 실행하더라구요.

date-range 데이터를 못가져온 상태에서 1번, 가져온 상태에서 1번 실행되어서 Chart.js 통해 그래프가 안그려 지더라구요.

혹시 해결 방법이 있을까요 ?

Chart 업데이트가 안되어서 생각이 들었으나, 데이터 전달 부터가 안되어서 방안이 생각이 안나네요 ㅠ

윤혁

질문자

2021.12.02

흐음.. 업데이트 쳐도 안되는거 같은데 어떻게 찾아봐야 할까요 ..

// Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#292b2c';

//전역 변수 data
const data_product = [];
const product_label = [];

sendAjax();


// 그래프 출력 함수
function sendAjax(){
 
  fetch("/productBarChart",{
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
  }).then((res)=>res.json())
    .then((res)=>{
      gclaer();
      // 데이터 저장
      const iam = res;
      console.log(data_product);
      console.log(product_label);
      // 라벨, 데이터 저장
      for(const ele in iam){
        if (iam[ele]._id == 'Simple') {
          product_label.push('test');
          data_product.push(Number(iam[ele].sum));
        }
        else{
          product_label.push(iam[ele]._id);
          data_product.push(Number(iam[ele].sum));
        }

      };
      myLineChart.update();
      console.log(data_product);
      // Bar Chart product
      const ctx = document.getElementById("productBarChart");
      const myLineChart = new Chart(ctx, {
       type: 'bar',
       data: {
          labels: product_label,
          datasets: [{
            label: "count",
            backgroundColor: "rgba(2,117,216,1)",
            borderColor: "rgba(2,117,216,1)",
            data: data_product,
         }],
        },
       options: {
          scales: {
           xAxes: [{
             time: {
               unit: 'month'
              },
              gridLines: {
              display: false
              },
              ticks: {
                maxTicksLimit: 6
              }
            }],
            yAxes: [{
              ticks: {
                min: 0,
                max: Math.max(...data_product)+50,
                maxTicksLimit: 5
              },
              gridLines: {
                display: true
              }
            }],
          },
          legend: {
            display: false
          }
        }
      });
      myLineChart.update();
  });
 
}