読者です 読者をやめる 読者になる 読者になる

やったこと

webサービスを作るときに考えたことを垂れ流します

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
  });

ちょっと強引で怪しげなやり方なので、真似する場合はご注意ください。。。