Chart.jsで棒グラフの目盛りを変更して上下を逆にする方法

以前紹介した、グラフの描画が簡単にできるチャートライブラリ「Chart.js」で、今回は少し変わった使い方をご紹介します。
最終的に何がしたいかというと、棒グラフを表示する際に縦軸の目盛りをカスタマイズして、上下を逆さまにしたいと思います。
つまり、棒グラフが下から上に伸びるのではなく、上から下に伸びる。
かつ、縦軸の目盛りを例えば下から上に0～100あったとすると、逆に上から下に表示するようにします。

上から下に伸びる棒グラフを作る

少し考えれば分かることですが、上から下に伸ばしないのなら単純にデータをマイナスにするだけです。
難しいのは、縦軸の目盛りも0～-100のようにマイナス表示になってしまうことです。

縦軸の目盛りを逆にする

見ての通り、要はマイナスがプラスに変われば万事解決です。
そのためには、callback関数を使って表示を変えてあげましょう。
具体的には、中学一年の最初で習う数学と同じです。
マイナスにマイナスを掛け算するとプラスになります。
ですので、以下のようにcallback関数内で「-1」を掛け算してあげます。

userCallback

・・・
    options: {
        scales: {
           yAxes: [{
              ticks: {
                 userCallback: function(label, index, labels) {
                    return (label * -1);
                 }
              }
           }]
        }
     }
・・・

これで縦軸の表示が変わりました。
ツールチップも対応したい場合はこのようにします。

callbacks

・・・
    options: {
        responsive: false,
        tooltips: {
            callbacks: {
                label: function (tooltipItem, data) {
                    return (data.datasets[0].data[tooltipItem.index] * -1);
                }
            }
        }
    }
・・・

完成サンプル

出来上がったのがこちらです。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
<script>
window.onload=function(){
  var barChartData5 = {
    labels: ['+5cm', '+10cm', '+20cm', '-5cm', '-10cm', '-20cm'],
    datasets: [{
        type: 'bar',
        label: "5mパター",
        data: [-50, -60, -80, -35, -30, -20],
        backgroundColor: [
            'rgba(200, 0, 0, 0.5)',
            'rgba(200, 0, 0, 0.5)',
            'rgba(200, 0, 0, 0.5)',
            'rgba(0, 0, 200, 0.5)',
            'rgba(0, 0, 200, 0.5)',
            'rgba(0, 0, 200, 0.5)',
        ],
        yAxisID: 'y-axis-1'
    }]
  };
  var ctxActualVsMax5 = document.getElementById("myChart5").getContext("2d");
  var theChart5 = new Chart(ctxActualVsMax5, {
    type: 'bar',
    data: barChartData5,
    options: {
        responsive: false,
        tooltips: {
            callbacks: {
                label: function (tooltipItem, data) {
                    return "強さ：" + (data.datasets[0].data[tooltipItem.index] * -1) + "%";
                }
            }
        },
        scales: {
           yAxes: [{
              type: "linear",
              display: true,
              position: "left",
              id: "y-axis-1",
              gridLines: {
                 display: true
              },
              labels: {
                 show: true,
              },
              ticks: {
                 min: -100,
                 max: 0,
                 stepSize: -10,
                 beginAtZero: true,
                 userCallback: function(label, index, labels) {
                    if ((label % 50) == 0) {
                        return (label * -1) + "%";
                    } else if (label == -40) {
                        return "カップ→";
                    } else {
                        return "";
                    }
                 },
              }
           }]
        }
     }
  });
}
</script>

実際にこのページで使用していますのでご覧ください。

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