以前、JavaScriptのライブラリ「Chart.js」で、作成したグラフの上下を逆さまにする方法をご紹介しましたが、今回はChart.jsの3.x系で、グラフのY軸（縦軸）の目盛を逆順にする方法です！
旧バージョンと少し書き方が違って苦戦したのでメモしたいと思います。
あわせて読みたい
Chart.jsで棒グラフの目盛りを変更して上下を逆にする方法
以前紹介した、グラフの描画が簡単にできるチャートライブラリ「Chart.js」で、今回は少し変わった使い方をご紹介します。最終的に何がしたいかというと、棒グラフを表...
目次
Y軸の目盛を逆順にする目的
例えば、Chart.jsを利用して学校のテストの点数をグラフに描画するとしましょう。
一般的なグラフであれば、Y軸の下限は0点、上限が100点になり、点数が高いほど上に表示されます。
管理者
日常でよく見るのは天気予報の気温グラフ。
株や為替のグラフもそうですね！
上記のグラフをコードを見ると、このような感じになります。
基本的な書き方ですね！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<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]を有効にするオプションを追加するだけです！
|
1 2 3 4 5 6 7 8 9 10 11 |
・・・ options: { scales: { y: { min: 1, max: 5, reverse: true } } } ・・・ |
順位の推移をグラフ化してみる
それでは、1週間の成績ランキングの推移を折れ線グラフにしてみます。
1クラスに30名在籍しているとして、先程の5人の成績順位を表現してみました！
完成したJavaScriptのコードはこちら！
適当にデータを追加したので、色のセンスが微妙なのは勘弁してくださいｗ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<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]の部分だけ注目してくださいね！
コメント