chart.jsでY軸の方向を逆にしたグラフを表示したい
chart.jsでグラフを描いてるんだけど、Y軸の向きを反転できなくて困った。
Y軸が「0, 1, 2, 3・・・」って昇順になってるのを「・・・3, 2, 1, 0」みたいに降順になったものを表示したいんだけど、どうもそういった機能には対応してないみたいだった。
chart.jsの中身をハックして改造してもよかったんだけど、それはちょっと大変そうだったので苦し紛れの方法で対処した。
データセットの値を全部マイナスにしたものを描画して、軸に表示されるスケールは正の値を表示させるという方法。
↓コードは以下
//マイナスプロットのデータを作成 var data_revers = $.extend(true, {}, data_hoge); for (var i = 0; i < data_revers.datasets[0].data.length; i++) { data_revers.datasets[0].data[i] = -data_hoge.datasets[0].data[i]; } //軸ラベルとポップアップ表示の符号を逆転 Chart.defaults.global.scaleLabel = "<%=-value%>"; Chart.defaults.global.tooltipTemplate = "<%if (label){%><%=label%>: <%}%><%= -value %>"; //チャート描画 var ctx = document.getElementById("line").getContext("2d"); mychart = new Chart(ctx).Line(data_revers, { responsive: false });
ちょっと強引で怪しげなやり方なので、真似する場合はご注意ください。。。