【解決法】Chart.jsで作ったグラフが潰れてしまう。

詰まったこと

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