以前、JavaScriptのライブラリ「Chart.js」で、作成したグラフの上下を逆さまにする方法をご紹介しましたが、今回はChart.jsの3.x系で、グラフのY軸(縦軸)の目盛を逆順にする方法です!
旧バージョンと少し書き方が違って苦戦したのでメモしたいと思います。
Y軸の目盛を逆順にする目的
例えば、Chart.jsを利用して学校のテストの点数をグラフに描画するとしましょう。
一般的なグラフであれば、Y軸の下限は0点、上限が100点になり、点数が高いほど上に表示されます。

管理者
日常でよく見るのは天気予報の気温グラフ。
株や為替のグラフもそうですね!
上記のグラフをコードを見ると、このような感じになります。
基本的な書き方ですね!
Y軸の目盛りを逆順にする
では、この点数を成績順のランキング形式でグラフに描画するとします。
Y軸をそのままにしてグラフにすると、1位が下になり、5位が上になってしまいます。
これだと、せっかく100点で1位を取った田中さんが悲しいことになりますねw
そこで、先程の[scales]内にあるY軸に、[reverse]を有効にするオプションを追加するだけです!
順位の推移をグラフ化してみる
それでは、1週間の成績ランキングの推移を折れ線グラフにしてみます。
1クラスに30名在籍しているとして、先程の5人の成績順位を表現してみました!
完成したJavaScriptのコードはこちら!
適当にデータを追加したので、色のセンスが微妙なのは勘弁してくださいw
わかりやすいグラフにするためにデータを増やしてしまったので、コードがちょっと複雑になってしまいましたが、今回の目的はChart.jsでグラフを描画する際に、Y軸を逆順にするお話でしたので、[reverse]の部分だけ注目してくださいね!
コメント