Chart.jsの円グラフ(Pie)で、項目名(label)を常時表示にする方法

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

Chart.js

かわいい感じのグラフをcanvas上に生成してくれるChart.js。
もちろん円グラフ(Pie)にも対応。
しかしデフォルトだと、項目名が非表示になっています。
じゃあいつ出るんだよというところですが、実はオンマウスすると、可愛く吹き出しで表示されます。

これをマウスに関係なく、常時出す方法についてです。



Pie & Doughnut Charts
http://www.chartjs.org/docs/#doughnut-pie-chart



初期だとこんな感じ。
これはこれでフラットで可愛いんですが、オンマウスした時の値・項目表示を常時にしたいんですよ、キャプチャ用に。そのためにはコードを下記のように変更。


window.onload = function(){
  var ctx = document.getElementById("chart-area").getContext("2d");
  window.myPie = new Chart(ctx).Pie(pieData, {
    tooltipTemplate: "<%if (label){%><%=label%><%}%>",
    onAnimationComplete: function(){
      this.showTooltip(this.segments, true);
    },
    tooltipEvents: [],
    showTooltips: true
  }

);


もう少し詳しく解説。


★window.myPie = new Chart(ctx).Pie(pieData, option);

optionにオプションを記述していきます。
これはChart.js公式サイトでもちゃんと解説されています。


tooltipTemplate: "<%if (label{%><%=label%><%}%>",

これは表示するtooltip(吹き出し)の内容を定義しています。
デフォルト値は<%if (label){%><%=label: %><%}%><%=value%>で、labelがあれば「label: value」、labelが空欄で値だけの場合は「value」で表示されるようになっています。今回はlabel(項目名)だけ出したいのでこの形式です。
tooltipについては更にカスタマイズが可能ですが、詳しくは公式サイトのこの辺りを読んで下さい。


onAnimationComplete: function(){ this.showTooltip(this.segments, true); },

onAnimationCompleteは、グラフの表示アニメーション完了時の処理を追加するオプションです。これはChart.js公式サイト基本オプションに載っています。
ここでthis.showTooltip(this.segments, true)を実行します。これはこのグラフに対するtoolTipを描画するfunctionです。公式サイトには載っていませんが、中のコードを探っていくと出てきます。もともとは定義されている動作が実行された際に、このfunctionが実行されるようになっています。


tooltipEvents: []

で、そのshowTooltipの実行タイミングとなるイベントを定義しているのがこのオプションです。初期値は["mousemove", "touchstart", "touchmove"]なので、ここを参考に追加・変更が可能です。今回は常に表示しておくために、リセットで[]にします。


showTooltips: true

そもそもtooltipを表示するか否かの設定です。
ここではtrueですが、falseにすると全く表示されなくなります。





これらを設定した結果が上記のような感じ。
お疲れ様でした。
日本語の詳しい解説サイトがあれば教えて下さい。



▼棒グラフ:bar chartはこちら(コメントありがとうございます!)
Chart.jsの棒グラフ(Bar)で、数値(data)を常時表示にする方法

コメント

お世話様です。
bar chartでもデータをグラフ上に表示させたいのですが同じやり方でしょうか?
| kevin | 2015/11/07 11:08 PM |
コメントありがとうございます。
bar chartでのカスタマイズ方法を記事にしてみましたので、こちらをご確認ください。
| みずき@管理人 | 2015/11/11 4:08 PM |
*
*

<< オープンセミナー岡山2015を開催しました #oso2015 | 【jQuery】valueを指定してラジオボタン(input:radio)を選択状態にする >>