chart.js를 사용하여 전화 브라우저에서 차트가 이상하게 보임

Question

chart.js를 사용하여 차트를 만듭니다. 차트 자체는 PC의 브라우저에 표시하는 한 꽤 깔끔하게 보입니다.

휴대 전화 브라우저를 사용하는 즉시 차트가 깔끔하게 보이지 않게되고, x 축은 부분적으로 절단됩니다. 부트 스트랩도 사용하고 있습니다.

내 코드는 다음과 같이 보입니다 :

<div id="TempChart" class="chart-container col-md-8 col-xs-8 col-lg-8 col-sm-8" style ="position: relative; 40vh; width 80vw"> 

    <canvas id="chart"></canvas> 

</div> 

도움이되지 않았다 다음에 변경 : 나는 또한 차트를 생성하는 내 자바 스크립트 코드의 일부가 다음과 같은 추가 한

<canvas id="chart" class = "img-responsive"></canvas> 

.

options: { 
     animation: { 
    duration: 0 
}, 
responsive: true, 

누구나 휴대 전화 브라우저에서도 멋지게 보이게하는 방법을 알고 있습니까?

Answer 1

뷰포트 크기 사용을 변화에 제대로 표시하려면

options: { 
    maintainAspectRatio: false, 

편집 : 나는

options: { 
     responsive: true, 

그래서 당신은 않고 특정 경우에 최적의 환경을 위 언급하지만, 사용하던 발견 또한 그것을 시도하고 싶을 수도 있습니다 :-)