初めてChart.jsを使ってみた ドーナツ 凡例も表示 (投稿テスト)

初めてChart.jsを使用したので個人的にメモをする。

以下、参考サイト

• [Chart.js サイト] (http://www.chartjs.org/)
• [Chart.js ドキュメント] (http://www.chartjs.org/docs/)
• http://liginc.co.jp/web/js/40934
• http://d.hatena.ne.jp/akishin999/20140715/1405434271
• http://k-holy.hatenablog.com/entry/2014/11/17/190927

グラフ作成は参考サイトを見れば分かるので割愛
・ツールチップ　tooltipTemplate
・凡例　legendTemplate

var myDoughnut new Chart(ctx).Doughnut(data,option);
document.getElementById("doughnut_legend").innerHTML = myDoughnut.generateLegend();

上の内容でグラフを作る際に、optionで渡すものの中にツールチップと凡例のテンプレートを渡す
ツールチップはそれで表示できる。
凡例はそこからgenerateLegend()で生成して表示

以下、渡すoption

var option = {
  animationEasing : "easeOutCubic",
  tooltipTemplate: "<%if (value){%><%=value%><%}%>",
  legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><span><%=segments[i].label%></span><%}%></li><%}%></ul>"
};

※dataにvalue、fillColor,labelが入っている前提