11.27 new Chart(ctx,{}) 사용 직업심리검사 / 설문조사 CSS 드디어 완료

https://velog.io/@kwonh/Chart.js-%EC%B0%A8%ED%8A%B8%EB%A5%BC-%EA%B7%B8%EB%A0%A4%EB%B3%B4%EC%9E%90-%EB%B0%94%EB%8B%90%EB%9D%BC-React-Vue%EC%97%90%EC%84%9C-Chart.js%EB%A1%9C-%EC%B0%A8%ED%8A%B8%EA%B7%B8%EB%A6%AC%EA%B8%B0

[Chart.js] 차트를 그려보자 - 바닐라, React, Vue에서 Chart.js로 차트그리기

chart.js와 canvas 사용했는데.. 그냥 canvas에 chart.js만 사용하면 윈도우 크기에 따라 동적으로 이상해져서..

너무 고생했음 ㅠㅠ 
그냥 canvas만 그리시면 화면 전체로 커져있기 때문에 저처럼 중간에 차트 삽입하실거면 styled.div같은 걸로 한번 감싸주시는 게 좋을 것 같습니다.

 

이 분 사이트 보고 굉장히 많이 참고해서 다행이었음..

 

쓰실 분 쓰세요 Result Page styled component입니다.

깃허브에 전체 코드도 올릴 것이니 보셔도 됩니다.

 

// Container
const Container = styled.div`
  width: 60%;
  background-color: white;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: auto;
`;


//App내 리턴부분에 태그 발췌

export default App () {
  // useEffect에 data부분만 넣고싶으신 state 데이터 넣으시면 됩니다. 
  // 의존성 배열에 해당 state 넣으셔야 합니다. 저 같은 경우는 graphArr
  useEffect(() => {
      let ctx = document.getElementById("Mychart").getContext("2d");
      console.log("Now Draw graph : graphArr", graphArr);
      // if (typeof Mychart !== "undefined") Mychart.destroy();
      let Mychart = new Chart(ctx, {
        type: "bar",
        data: {
          labels: [
            "능력발휘",
            "자율성",
            "보수",
            "안정성",
            "사회적 인정",
            "사회봉사",
            "자기계발",
            "창의성",
          ],
          datasets: [
            {
              label: "직업가치관 결과",
              backgroundColor: "rgba(0, 99, 255, 0.27)",
              borderColor: "rgba(0, 99, 255, 0.72)",
              borderWidth: 1,
              hoverBackgroundColor: "rgba(0, 99, 255, 0.427)",
              hoverBorderColor: "rgba(0, 99, 255, 0.72)",
              // data: ["3", "3", "4", "3", "4", "5", "5", "1"],
              data: graphArr,
            },
          ],
        },
      });
      if (graphArr.length === 0) Mychart.destroy();
    }, [graphArr]);

	return (
    ...어쩌구저쩌구 코드
     <table>
       <thead>직업가치관 결과</thead>
       <tbody></tbody>
     </table>
     <Container>
     	<canvas id="Mychart"></canvas>
     </Container>
     <table>
     	<thead>가치관과 관련이 높은 직업</thead>
     	<tbody></tbody>
     </table>
    );
}