Chart.jsの棒グラフ(Bar)で、数値(data)を常時表示にする方法

2015/11/10 JavaScript/jQuery  このエントリーをはてなブックマークに追加
Chart.js

Chart.js

かわいい感じのグラフをcanvas上に生成してくれるChart.js。
以前「Chart.jsの円グラフ(Pie)で、項目名(label)を常時表示にする方法」という記事を書いたのですが、質問が来ました。


「bar chartでもデータをグラフ上に表示させたいのですが同じやり方でしょうか?」


残念ですが全く別です。


しかも棒グラフの方がややこしいです。何でこんな仕様にしたのか、開発者に問いたい……まぁなんとなく理由はわかりますが。ということで、質問への回答ということで、今回は棒グラフ編です。

chart.js bar chart

Bar Chart
http://www.chartjs.org/docs/#bar-chart


初期だとこんな感じ。
オンマウスした時に値を表示するようになっていますが、その際には横軸と数値がまとまって表示されます。これをこのまま表示すると、重なり合って大変なことになるので、各棒(データ)毎に表示して上げる必要があります。
コードは下記のように変更。

window.onload = function(){
  var ctx = document.getElementById("canvas").getContext("2d");
  window.myBar = new Chart(ctx).Bar(barChartData, {
    tooltipEvents: [],
    onAnimationComplete: function(){
      this.eachBars(function(bar){
        var tooltipPosition = bar.tooltipPosition();
        new Chart.Tooltip({
          x: Math.round(tooltipPosition.x),
          y: Math.round(tooltipPosition.y),
          xPadding: this.options.tooltipXPadding,
          yPadding: this.options.tooltipYPadding,
          fillColor: this.options.tooltipFillColor,
          textColor: this.options.tooltipFontColor,
          fontFamily: this.options.tooltipFontFamily,
          fontStyle: this.options.tooltipFontStyle,
          fontSize: this.options.tooltipFontSize,
          caretHeight: this.options.tooltipCaretSize,
          cornerRadius: this.options.tooltipCornerRadius,
          text: bar.value,
          chart: this.chart
        }).draw();
      });
    }

  });
}

tooltipEvents、onAnimationCompleteは前回の記事で解説しているので、ここでは省略します。


this.eachBars(function(bar){});

bar chartの場合、棒グラフデータはここに入っています。各データ毎に値を表示するため、この中身を回して、1回ずつtooltipを表示させるという面倒なことをしています。まとめてさせて欲しい…。


bar.tooltipPosition();

表示には表示位置の情報が必要になります。表示位置を取得するfunctionは存在しているので、これを利用します。


new Chart.Tooltip();

ここで各データ毎にtooltipを生成します。このコードはChart.Core.js内にあるので、その中を見ていただければと思いますが、x: Math.round(tooltipPosition.x)が表示位置の横座標、y: Math.round(tooltipPosition.y)が表示位置の縦座標なので、実行前にbar.tooltipPosition();で取得した値をカスタマイズすることで、表示位置の調整が可能になっています。


chart.js bar chart

設定するとこんな感じに。
ちなみに、new Chart.Tooltip();の多数のオプションは省略できません。我慢して全て記述して下さい。Chart.Core.jsの中身を参考にしてみてください。


コメント

管理者の承認待ちコメントです。
| - | 2016/01/16 12:09 PM |
*
*

<< CKEditorのサーバブラウザ機能で選択した画像URLをカスタマイズする | jQueryの基本的な書き出し比較とまとめ >>