자바빵
521
2021-02-25 17:25:10
3
679

Chart.js 를 반응형에 맞게 사용하고 싶습니다.


찾아보니,

option: {responsive:true}를 주면 알아서 반응형에 맞게 적용이 되긴하는데...

제가 원하는 크기보다 2-30%정도 작게 나와서 커스텀을 해보려고합니다.


이것저것 시도해봤는데, 크게 두 가지 문제가 있었습니다.

1. canvas에 width와 height를 %로 주니, 원하는 대로 작동하는거 같은데... 차트가 엄청 흐리게 나오는 문제가 있습니다.


2. canvas에 width와 height를 vw, vh로 주니, 부모 element를 기준으로 사이즈가 정해지는게 아니고, 훨씬더 상위의 element기준으로 차트가 생성됩니다.

(이런식으로 튀어나옵니다 ㅠ)






결론적으로, 제가 하고 싶은건

왼쪽처럼 좌우 여백이 많이 비게 나오는데,

오른쪽 처럼 좌우 여백이 별로 없이 꽉차게, 차트가 크게 나왔으면 좋겠습니다.



어느 부분을 손보면 될까요??

0
  • 답변 3

  • 호롱
    42
    2021-02-25 17:31:28

    조금만 수정해서 간단하게 맞추기가 쉽지는 않아요 ...
    만약 상업성이 있는 프로젝트가 아니라면

    apexchart 라는 라이브러리가 훨씬 유연하게 수정이 가능합니다. (유료)

  • 킁킁탐정
    844
    2021-02-25 18:05:14

    간단하게 예제로 만들어보면 다음과 같고 핵심 옵션은 aspectRatio: 1입니다.

    https://codesandbox.io/s/prod-water-h6bhh?file=/index.html

    공식 문서에 옵션 설명이 있습니다. 다음의 주소에 있는 문서의 내용을 모두 읽어보시길 권해드립니다.

    https://www.chartjs.org/docs/latest/general/responsive.html


  • 자바빵
    521
    2021-03-03 14:11:36

    @HongJiseong

    chart js만 알았는데, apexchart도 알아봐야겠습니다!


    @킁킁탐정

    이 기능이나 옵션을 뭐라고 검색해야될지 몰라서 검색 하면서 stackoverflow만 봤는데, 공식문서에 답이 있군요 ㅠㅠ 감사합니다!!!

  • 로그인을 하시면 답변을 등록할 수 있습니다.