Chart.js 3系でグラフのY軸（縦軸）の目盛りを逆順にする方法

以前、JavaScriptのライブラリ「Chart.js」で、作成したグラフの上下を逆さまにする方法をご紹介しましたが、今回はChart.jsの3.x系で、グラフのY軸（縦軸）の目盛を逆順にする方法です！
旧バージョンと少し書き方が違って苦戦したのでメモしたいと思います。

Y軸の目盛を逆順にする目的

例えば、Chart.jsを利用して学校のテストの点数をグラフに描画するとしましょう。
一般的なグラフであれば、Y軸の下限は0点、上限が100点になり、点数が高いほど上に表示されます。

上記のグラフをコードを見ると、このような感じになります。
基本的な書き方ですね！

<canvas id="myChart"></canvas>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["佐藤","鈴木","高橋","田中","伊藤"],
    datasets: [{
      label: 'テストの点数',
      data: [80,95,60,180,75],
      backgroundColor: '#ffaaaa'
    }]
  },
  options: {
    scales: {
      y: {
        min: 0,
        max: 100
      }
    }
  }
});
</script>

Y軸の目盛りを逆順にする

では、この点数を成績順のランキング形式でグラフに描画するとします。
Y軸をそのままにしてグラフにすると、1位が下になり、5位が上になってしまいます。

これだと、せっかく100点で1位を取った田中さんが悲しいことになりますねｗ
そこで、先程の[scales]内にあるY軸に、[reverse]を有効にするオプションを追加するだけです！

・・・
  options: {
    scales: {
      y: {
        min: 1,
        max: 5,
        reverse: true
      }
    }
  }
・・・

順位の推移をグラフ化してみる

それでは、1週間の成績ランキングの推移を折れ線グラフにしてみます。
1クラスに30名在籍しているとして、先程の5人の成績順位を表現してみました！

完成したJavaScriptのコードはこちら！
適当にデータを追加したので、色のセンスが微妙なのは勘弁してくださいｗ

<canvas id="myChart"></canvas>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["月","火","水","木","金","土","日"],
    datasets: [
      {
        label: '佐藤',
        data: [11, 9, 15, 12, 12, 15, 10],
        borderColor: '#fafaaa',
        backgroundColor: '#f4f444',
      },
      {
        label: '鈴木',
        data: [10, 3, 5, 2, 2, 5, 7],
        borderColor: '#afafaa',
        backgroundColor: '#4f4f44',
      },
      {
        label: '高橋',
        data: [20, 23, 22, 17, 21, 20, 20],
        borderColor: '#aafafa',
        backgroundColor: '#44f4f4',
      },
      {
        label: '田中',
        data: [1, 2, 2, 1, 1, 2, 1],
        borderColor: '#aaaaff',
        backgroundColor: '#4444ff',
      },
      {
        label: '伊藤',
        data: [10, 13, 12, 19, 11, 17, 18],
        borderColor: '#faaafa',
        backgroundColor: '#f444f4',
      }
    ]
  },
  options: {
    scales: {
      y: {
        min: 1,
        max: 30,
        reverse: true
      }
    }
  }
});
</script>

わかりやすいグラフにするためにデータを増やしてしまったので、コードがちょっと複雑になってしまいましたが、今回の目的はChart.jsでグラフを描画する際に、Y軸を逆順にするお話でしたので、[reverse]の部分だけ注目してくださいね！

• Original:https://minory.org/chartjs3-reverse.html
• Source:Minory
• Author:管理者

Amazonベストセラー