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

以下、参考サイト

グラフ作成は参考サイトを見れば分かるので割愛
・ツールチップ　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が入っている前提

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

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

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