막힌 것

Chart.js에서 원형 차트를 만들면 원형 차트가 부서집니다.
아래 이미지와 같이 되어 버린 것입니다.

해결책

options 설정 검토

    options: {
        maintainAspectRatio: false,
    }

maintainAspectRatio를 추가하는 것으로, 「사이즈 변경시에, 원래의 캔버스의 애스펙트비(width/height)를 유지합니다」, 라고 합니다.

canvas 태그의 설정을 검토합니다.

chart.js에서는 이것 ↓도

    <canvas height="40vh" width="80vw">

이것 ↓도, 무효인 값이 됩니다.

    <canvas style="height:40vh; width:80vw">

정확하게는, 아래 ↓와 같이, 부모 요소를 추기해, 거기에 style 속성을 기재하지 않으면 안됩니다.

    <div class="chart-container" style="position: relative; height:40vh; width:80vw">
        <canvas id="chart"></canvas>
    </div>

결과

해결할 수 있었다! 이번에는 반응하고 싶다!

점 설치: 반응형 웹 디자인 을 참고로 반응형으로 그래프의 크기를 바꾸어 보았습니다.

    <div class="chart-container">
        <canvas id="ageChart"></canvas>
    </div>

    // 上であげた画像のように、0~90歳までの比率をグラフにしております。
      var ageChartTemp = new Chart(ageChart, {
        type: 'pie',
        data: {
          labels: array_age,
          datasets: [{
            backgroundColor: [
              "#BB5179",
              "#FAFF67",
              "#008080",
              "#00FF00",
              "#FF00FF",
              "#808000",
              "#800080",
              "#800000",
              "#3399FF",
              "#336666"
            ],
            data: array_age_total
          }]
        },
        options: {
          maintainAspectRatio: false,
        }
      });

노도의 미디어 쿼리 설정! ! !

@media(max-width: 414px){
    .chart-container{
        position: relative;
        width:80vw;
        height:65vh;
    }
}

요약

원형 차트가 깔끔하게 표시되었으므로 기분이 올랐습니다.

참고문헌

Chart.js Document